>  기사  >  웹 프론트엔드  >  CSS 위치 지정 사용 소개

CSS 위치 지정 사용 소개

高洛峰
高洛峰원래의
2017-03-16 10:31:052008검색

position 옵션은 속성 요소의 위치를 ​​정의합니다. 이 옵션에는 static, 상대, 절대, 고정, 상속

속성 값이 상대, 절대, 고정

| 오른쪽| 아래z -index 가 작동합니다. 정적(기본값)

상대적(상대 위치 지정)

절대(절대 위치 지정

🎜>)

고정(절대 위치 지정, 절대 및 윈도우 브라우저, 하위 버전 브라우저는 ie6, ie7 등을 지원하지 않음)

상대 및 정적 그들은 모두 문서의 다른 요소를 기준으로 배치되며 상대 위치 지정 범주에 속합니다. 차이점은 하나는 변위를 제어할 수 있고 다른 하나는

정적(기본값)을 제어할 수 없다는 점입니다. )

에서 기본값 을 사용하는 경우 CSS에서 해당 요소에 대해 위쪽, 왼쪽, 오른쪽, 아래쪽, z-index를 정의하면 적용되지 않습니다

relative

relative는 오프셋과 Z-인덱스를 설정하여 다른 일반 위치를 기준으로 오프셋을 제어할 수 있다는 점을 제외하면 기본값과 동일하게 동작합니다.

모든 요소의 위치 지정(positon) 기본값은 정적입니다. 아무 것도 쓰지 않으면 상대 위치 지정을 의미하며 topp, left, z-index, right 및 아래쪽 값이 설정되지 않습니다. . 동작은 기본값과 동일합니다.

절대 및 고정

기능: 1. 정의되지 않은 경우 블록 수준 요소의 너비가 더 이상 100%가 아닙니다.

내용에 따라 자동으로 조정됩니다. 2. z-index가 정의되지 않은 경우 절대 요소가 다른 요소를 덮습니다.

3.

floating

absolute가 이전 상위 요소에 상대적인 이후의 효과와 유사하게 일반적인 문서 흐름에서 벗어나 더 이상 공간을 차지하지 않습니다. is not static 절대 위치 지정을 수행합니다. 상위 요소의 위치가 지정되지 않으면 절대값은 html 문서 전체를 기준으로 절대적으로 위치 지정됩니다.

fixed

브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 즉, 웹페이지를 어떻게 스크롤하든 요소는 항상 화면의 특정 위치에 유지됩니다. 왼쪽 컨트롤 바가 사용자에게 항상 표시되도록 하려면 위치 지정에 position:fixe를 사용하세요.

ie6 및 ie7이 고정 속성을 지원하지 않는 경우 해결 방법

해결책

position:absolute 사용

_top:expression ( eval(

문서

.documentElement.scrollTop))

위 내용은 CSS 위치 지정 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.