DIV 레이아웃에서 위치 속성의 네 가지 주요 용도
- 怪我咯원래의
- 2017-06-22 10:52:302572검색
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에서의 너비는 전체 페이지의 너비가 아닌 상위 요소의 너비에 따라 달라집니다.
IE6은 CSS의 position:fixed 속성을 지원하지 않습니다. 정말 안타까운 일입니다. 그렇지 않았다면 이 멋진 효과를 시도해 볼 수도 있었을 것입니다.
상대 위치 지정이란 정확히 무엇을 의미하나요? 상대 위치 지정을 기반으로 하는 위치는 어디인가요? 개념을 명확히 할 필요가 있습니다. 상대 위치 지정은 요소의 기본 위치를 기준으로 위치 지정하는 것입니다. 상대적이므로 위치를 지정하려면 서로 다른 값을 설정해야 합니다. 위쪽, 아래쪽, 왼쪽, 오른쪽의 4개 값이 협력하여 요소의 위치를 명확하게 합니다. nav 레이어를 아래로 20px, 왼쪽으로 40px 이동하려면:
다음과 같이 쓸 수 있습니다: #nav{position:relative;top:50px;left:50px;}
그러나 다음 상황에 주의해야 합니다. , 상대 위치가 뒤따릅니다. woaicss 레이어는 nav 아래에 표시되지 않지만 어느 정도 nav와 겹칠 것입니다!
위 내용은 DIV 레이아웃에서 위치 속성의 네 가지 주요 용도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!