CSS 위치 속성

이 글은 CSS의 위치 속성에 대한 글을 주로 공유하며, 참고할만한 가치가 있어 모든 분들께 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

(1), static
은 정적인 것으로 간주될 수 있으며 기본 요소는 정적으로 위치하며 객체는 일반적인 흐름을 따릅니다. 이때 4가지 위치 오프셋 속성은 적용되지 않습니다. 즉, 왼쪽, 오른쪽, 아래쪽, 위쪽을 사용하는 것은 적용되지 않습니다.

(2),relative
상대 위치 지정, 개체는 일반 흐름을 따르며 해당 위치를 참조하여 위쪽, 오른쪽, 아래쪽 및 왼쪽의 네 가지 위치 지정 오프셋 속성을 통해 오프셋될 때 영향을 받지 않습니다. 일반 흐름의 일반 스트림의 모든 요소입니다.

(3), 절대
a, 절대 위치 지정, 개체가 일반 흐름에서 벗어납니다. 이때 오프셋 속성은 위치 지정된 조상 요소가 없는 경우를 참조합니다. body 요소로 돌아갑니다. 상자의 오프셋 위치는 일반 흐름의 요소에 영향을 주지 않으며 해당 여백은 다른 여백과 함께 축소되지 않습니다.

b. 요소 위치 지정은 두 가지 조건을 충족해야 합니다. 첫 번째는 상위 요소일 수도 있고 상위 요소의 상위 요소일 수도 있습니다. 그렇지 않은 경우 본체를 제어 개체로 선택합니다. 두 번째 조건은 조상 요소의 위치가 지정되어야 한다는 것입니다. 일반 사용자의 관점에서는 position의 속성 값이 비정적인지 여부는 중요하지 않습니다.

(4), 고정
고정 위치 지정, 절대값과 일치하지만 오프셋 위치 지정은 창을 기반으로 합니다. 스크롤 막대가 나타나면 개체가 스크롤되지 않습니다.

(5), center
은 절대값과 일치하지만 오프셋 위치는 조상 요소의 중심점을 기준으로 합니다. 상자는 포함된 컨테이너 내에서 수직 및 수평 중앙에 위치합니다. (CSS3)

(6), 페이지
는 절대값과 일치합니다. 요소가 페이지가 매겨진 미디어 또는 영역 블록 내에 있는 경우 요소의 포함 블록은 항상 초기 포함 블록이며, 그렇지 않은 경우 각 절대 모드에 따라 다릅니다. (CSS3)

(7), 끈적한
객체는 정상일 때 정상적인 흐름을 따릅니다. 상대(Relative)와 고정(Fixed)의 조합과 같습니다. 화면에 있을 때는 일반적인 흐름에 따라 입력되며 화면 밖으로 스크롤되면 고정된 것처럼 동작합니다. 이 속성의 성능은 현실에서 볼 수 있는 흡착 효과입니다. (CSS3)

관련 권장 사항:

position 속성 in CSS

css: position attribute

CSS에서 Position 속성의 의미

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