HTML에서 위치와 부동을 사용하는 방법은 무엇입니까?

구문:

위치: 정적 | 절대 위치 | 고정 위치 | 상대 위치 지정 규칙(HTML의 기본 상태)

절대: 절대 위치, 개체는 문서 흐름에서 벗어나 왼쪽, 위쪽을 사용하여 정확하게 위치를 지정해야 합니다. , 오른쪽, 아래쪽 및 기타 속성. 계단식 배열에 z-index 속성을 사용할 수 있습니다. (절대 위치 지정 사용 시 요소가 떠서 지정한 위치에 없으면 해당 요소의 상위 요소에 상대 위치 지정을 사용할 수 있습니다. "개인 제안")

relative: 상대 위치 지정, 개체가 이탈되지 않음 절대가 같은 방식으로 쌓일 수는 없지만 일반 문서 흐름에서 원래 개체 위치를 기준으로 이동하려면 왼쪽, 위쪽, 오른쪽, 아래쪽 및 기타 속성을 사용해야 합니다. 다른 요소가 차지하게 됩니다.

fixed: 문서 흐름과 분리된 고정 위치 지정을 통해 요소를 화면의 고정 위치에 유지할 수 있으며 스크롤 막대를 아래로 당겨도 요소 위치가 변경되지 않습니다.

<p  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是p111111</p>

p111111은 아래로 150px, 오른쪽으로 200px를 이동합니다.

<p  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是p222222</p>

p222222는 아래쪽에서 150px, 오른쪽 테두리에서 100px를 이동합니다.

항상 오른쪽 하단에 표시되는 모듈을 만들고 싶을 때 위치를 사용합니다. 페이지: 고정, 하단: 50px, 오른쪽: 50px 페이지가 어떻게 변경되더라도 p는 항상 시각적 범위 내에서 동일한 위치에 표시됩니다. z-index: 100px; 뒤따르는 픽셀이 클수록 p의 수준이 높아집니다.

구문:

float: 왼쪽 | 없음; 오른쪽, 왼쪽 또는 사용되지 않음(기본값)

float: flow, float는 Floating입니다.

<p  id="p1">
　　<p  id="p2"></p>
</p>

부모 요소에 상대적인 것은 위와 같습니다: p1은 p2의 부모 요소 p2이고, p2는 p1 내부에서만 float될 수 있습니다.

floating에 자주 사용되는 상황은 수평 탐색 막대를 사용하는 것입니다. 가로 네비게이션 바를 구현하는 방법에는 두 가지가 있습니다. li 태그의 표시 속성을 인라인 스타일로 변경하면 목록을 타일링할 수 있습니다. 이것이 핵심 부분이지만 상자 모델을 이해하면 알 수 있습니다. 인라인 태그의 여백과 패딩은 반대입니다. 여기에서는 목록 옵션의 왼쪽과 오른쪽만 늘릴 수 있으며 위쪽과 아래쪽만 제어할 수 없습니다. 블록 수준 레이블의 방향이 제어됩니다.

float는 또한 그림과 텍스트를 동일한 p에 넣은 다음 그림과 p에 float를 제공하는 일부 텍스트 배치 그림 효과의 간단한 응용 프로그램입니다. 왼쪽 |

위 내용은 HTML에서 위치와 부동을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!