DIV 레이아웃에서 위치 속성의 네 가지 주요 용도

position 속성Position의 원래 영어 의미는 position, position, status을 의미하는 p 레이아웃

속성

을 올바르게 사용하세요. 배치를 의미하기도 합니다. CSS 레이아웃에서 Position은 매우 중요한 역할을 하며, 많은 컨테이너의 위치 지정은 Position을 사용하여 완료됩니다.

Position 속성에는 정적, 절대, 고정, 상대의 네 가지 선택적 값이 있습니다. 서로 다른 용도를 함께 배워봅시다. 연구하는 동안 어떤 레이아웃 상황에서 사용해야 하는지 생각해 보아야 합니다.
Position 속성에 대한 자세한 내용은 여기를 참조하세요.

◆P 레이아웃 속성 position:static No positioning

이 속성 값은 모든 요소의 기본 위치입니다. 일반적인 상황에서는 이를 구체적으로 선언할 필요가 없지만 때로는 상속이 발생합니다. 요소에 의해 상속된 속성이 자체적으로 영향을 미치는지 확인하려면 position:static을 사용하여 상속을 취소할 수 있습니다. 즉 요소 위치 지정의 기본값을 복원할 수 있습니다.
예: #nav{position:static;}

◆P 레이아웃 속성 position:absolute　Absolute positioning

position:absolute를 사용하면 요소를 원하는 위치로 매우 정확하게 이동할 수 있습니다. nav Move를 이동해 보겠습니다. 페이지 오른쪽 상단에 있습니다. nav{position:absolute;top:0;right:0;width:200px;}
절대 위치 지정을 사용하는 nav 레이어 앞이나 뒤의 레이어는 이 레이어가 존재하지 않는다고 생각할 것입니다. , z 방향에서는 상대적으로 독립적이며 다른 z 방향 레이어에 전혀 영향을 미치지 않습니다. 따라서 position:absolute는 요소를 고정된 위치에 배치하는 데 적합하지만 근처 레이어를 기준으로 레이어의 위치를 ​​결정해야 하는 경우에는 작동하지 않습니다. 아래 설명된 대로 상대 위치 지정만 사용할 수 있습니다. 여기서 언급해야 할 WinIE 버그가 있습니다. 즉, 절대 위치에 있는 요소의 상대 너비를 정의하면 IE에서의 너비는 전체 페이지의 너비가 아닌 상위 요소의 너비에 따라 달라집니다.

◆P 레이아웃 속성 위치:고정 창을 기준으로 한 고정 위치

이 위치 속성 값은 무엇을 의미하나요? 요소는 절대값과 유사하게 위치하지만 포함 블록은 뷰포트 자체입니다. 웹 브라우저와 같은 화면 미디어에서는 문서가 스크롤될 때 요소가 브라우저 보기에서 이동하지 않습니다. 예를 들어 프레임 스타일 레이아웃이 허용됩니다. 인쇄물과 같은 페이지 미디어에서는 고정된 요소가 첫 번째 페이지의 동일한 위치에 나타납니다. 이는 흐르는 제목이나 각주를 생성하는 데 사용할 수 있습니다. 비슷한 효과를 보았지만 대부분은 CSS를 통해서가 아니라 JS 스크립트를 사용하여 달성되었습니다.

IE6은 CSS의 position:fixed 속성을 지원하지 않습니다. 정말 안타까운 일입니다. 그렇지 않았다면 이 멋진 효과를 시도해 볼 수도 있었을 것입니다.

◆P 레이아웃 속성 위치:상대 상대 위치 지정

상대 위치 지정이란 정확히 무엇을 의미하나요? 상대 위치 지정을 기반으로 하는 위치는 어디인가요? 개념을 명확히 할 필요가 있습니다. 상대 위치 지정은 요소의 기본 위치를 기준으로 위치 지정하는 것입니다. 상대적이므로 위치를 지정하려면 서로 다른 값을 설정해야 합니다. 위쪽, 아래쪽, 왼쪽, 오른쪽의 4개 값이 협력하여 요소의 위치를 ​​명확하게 합니다. nav 레이어를 아래로 20px, 왼쪽으로 40px 이동하려면:
다음과 같이 쓸 수 있습니다: #nav{position:relative;top:50px;left:50px;}
그러나 다음 상황에 주의해야 합니다. , 상대 위치가 뒤따릅니다. woaicss 레이어는 nav 아래에 표시되지 않지만 어느 정도 nav와 겹칠 것입니다!

위 내용은 DIV 레이아웃에서 위치 속성의 네 가지 주요 용도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!