position 속성은 요소의 위치 지정 유형을 지정합니다. 이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다. 이번 포스팅에서는 CSS의 position 속성에 대해 알아보겠습니다.

Standard

MDN 문서에 따르면 CSS 속성 위치는 문서에서 요소의 위치를 지정하는 데 사용됩니다. 또한 요소의 최종 위치를 결정하려면 위쪽, 오른쪽, 아래쪽 및 왼쪽 오프셋 속성이 필요합니다. 모든 요소에 적용되고 상속이 없으며 계단식 컨텍스트를 생성합니다. 위치 지정 값에는 5가지 유형이 있습니다.

기본값 static
요소의 위치 속성이 설정되지 않았거나 값이 정적인 경우 요소는 문서 흐름에 있으며 왼쪽과 같은 오프셋 속성은 효과가 없습니다. 문서에는 z-index 값이 유효하지 않다고 나와 있습니다. 잠시 생각해봤는데 요소가 일반적인 문서 흐름에 있으면 일반적으로 상위 및 하위 레이어에서 해당 요소와 충돌하는 다른 요소가 없으므로 기본적으로 Z-index에 대한 응용 시나리오는 없습니다. 혹시 내가 놓친 게 있는 건 아닐까? 이 외에도 static에는 특별한 것이 없습니다.
상대 위치 지정으로 설정된 요소는 여전히 문서 흐름에 있으며 해당 요소가 차지하는 공간은 그대로 유지됩니다. 그러나 상, 하, 좌, 우 오프셋 속성이 설정되면 원래 위치를 기준으로 해당 방향으로 이동하게 되며 이때 요소 공간은 여전히 존재하며 주변 요소는 재배치되지 않습니다. 즉, 투명 벽돌이 요소의 원래 위치에 배치되어 눈에 보이지 않지만 만질 수 있게 됩니다. 또한 상대적으로 배치된 요소는 내부 하위 요소의 위치 지정을 위한 기준점 역할을 하는 포함 블록을 만듭니다.

포함 블록의 정의: 가장 가까운 블록 수준 상위 상자, 테이블 셀 또는 인라인 블록 인라인-블록 상위 상자의 콘텐츠 가장자리로 구성됩니다.

결론 블록 결정:

절대 위치 절대

절대 위치 요소는 문서 흐름(정상 흐름)에서 벗어나게 됩니다. 즉, 원래 공간은 0입니다. , 투명한 벽돌 블록 자리 표시자가 없습니다. 주변 요소도 재배열됩니다. 동시에 요소는 서식 컨텍스트(BFC)를 생성하고 위쪽 및 아래쪽 여백은 병합되지 않으며 내부 부동 요소로 인해 높이가 축소되지 않습니다.

컨테이닝 블록의 정의와 판단을 설명해야 하는 이유는 절대 위치에 있는 요소의 위치 지정 지점이 가장 가까운 컨테이닝 블록이고 설정, 아래, 왼쪽, 오른쪽 오프셋 속성이 다음을 기반으로 하기 때문입니다. 포함 블록의 왼쪽 위 모서리를 원점으로 삼습니다(텍스트 방향과 동일). 위 그림에서 볼 수 있듯이 절대 위치에 있는 조상 요소의 위치 속성이 정적이면 초기 포함 블록인 몸체를 기준으로 위치가 지정됩니다. 다른 값의 위치 속성을 가진 조상 요소가 있는 경우 해당 요소는 생성된 포함 블록을 기준으로 배치됩니다.

실제로 여기서 플로팅 요소와 비교하고 싶습니다. Zhang Xinxu가 자신의 블로그에서 플로팅 요소는 너비가 있고 높이가 없는 인라인 블록 요소로 간주될 수 있지만 절대 위치는 높이가 없는 인라인 블록으로 간주될 수 있다고 언급한 것을 보았습니다. 너비가 있고 높이가 없습니다. 왜 인라인 블록 요소로 간주되는지는 잘 기억이 나지 않습니다~

고정 위치 고정

고정 위치 요소는 화면 뷰포트를 기준으로 위치가 지정됩니다. 이 경우 스크롤로 인해 위치가 변경되지 않습니다. 웹페이지가 인쇄되면 이 요소는 각 페이지의 고정된 위치에 나타납니다. 또한 고정 위치 요소도 서식 지정 컨텍스트를 생성합니다.
문서에는 고정 위치에 영향을 미치는 특별한 상황이 있다고 언급되어 있습니다. 즉, 상위 요소의 변환 속성이 없음이 아닌 경우 고정 위치 지정 컨테이너가 뷰포트 대신 상위 요소로 변경됩니다. 이런 예상치 못한 상황은 주의를 기울이고 피해야 합니다.
마지막으로, 모바일 웹 개발자라면 iOS 웹뷰 아래의 고정 레이아웃에서도 몇 가지 버그를 접하게 될 것입니다. 이러한 버그에 대한 완벽한 솔루션을 찾는 것은 불가능할 수 있으므로, 버그가 발생하면 js를 사용하여 스타일을 동적으로 결정 및 수정하거나 단순히 레이아웃을 다시 설정하는 것을 고려해보세요.

sticky positioningsticky

이 포지셔닝 방법은 실험적인 속성이고 문서에서는 프로덕션 환경에서 사용하지 말 것을 권장하기 때문에 많은 사람들이 본 적이 없다고 생각합니다. 그러나 그 기능은 여전히 매우 유용하므로 이에 대해 배울 수 있습니다.

점성 위치 지정은 상대 위치 지정과 고정 위치 지정의 조합입니다. 상, 하, 좌, 우의 오프셋 속성을 기준으로 임계값을 설정합니다. 상대 위치 지정이 임계값을 초과하면 고정 위치 지정으로 변환됩니다.

새로운 속성이므로 이 데모로 이동하여 살펴보세요.

데모에서는 코드가 주로

<span style="font-size: 16px;">dt{<br>    position: -webkit-sticky;<br>    position: sticky;<br>    top: -1px;<br>}<br></span>

로그인 후 복사

입니다. 우선 브라우저에서 고정 위치 지정을 지원하는 것으로 보아 IE를 제외하면 기본적으로 지원되는 것을 알 수 있습니다. 단, Firefox에서는 table 관련 요소가 지원되지 않으며, Chrome에서는 thead, tr 등의 요소가 지원되지 않습니다. 따라서 정상적으로 사용하려면 -webkit과 같은 접두사를 추가해야 할 수도 있습니다.
두 번째로 top:-1px를 임계값으로 설정하세요. 요소가 상대적으로 위치가 지정된 요소인 경우 상단과 포함 블록 사이의 거리가 >= -1px이면 고정 위치로 변환됩니다. 따라서 끈적한 포지셔닝을 사용하려면 임계값 설정이 중요합니다.

데모에 표시된 기능 외에도 고정 위치 지정 응용 시나리오를 소위 고정 바닥글에서도 사용할 수 있습니다. 제품에 이런 레이아웃이 필요한 경우가 많은 것 같아요~

제한된 너비의 요소 위치 지정

많은 경우

<span style="font-size: 16px;">position:absolute;<br>top:0;<br>bottom:0;<br>right:0;<br>left:0;<br>width:50%;<br>height:50%;<br>margin:auto;<br></span>

로그인 후 복사

을 사용하여 절대 위치 요소를 수직 및 수평 중앙에 배치합니다

. 여백은 자동 값으로 설정되고 방정식에 따라:

margin+border+padding+width=element width/height 그래서 여백은 센터링을 달성하기 위해 해당 방향에서 자유 부분의 절반으로 설정됩니다.

하지만 문서 흐름에서 절대적으로 배치된 요소는 아닌가요? 마진이 여전히 작동하는 이유는 무엇입니까? 이는 위, 아래, 왼쪽 및 오른쪽 오프셋 속성도 설정했기 때문인 것으로 나타났습니다. 일반적으로 위, 아래 또는 왼쪽과 오른쪽이 동시에 설정되는 경우, 즉 반대 위치 지정 방향 속성이 동시에 특정 위치 지정 값을 갖는 경우에만 설정하면 됩니다. 시간이 지나면 유체 특성이 발생합니다. 이 시점에서 절대 위치에 있는 요소의 너비는 포함 블록의 너비에 맞춰 조정됩니다. 이 경우 절대 위치 지정 요소는 일반 문서 흐름의 요소와 동일하며 margin:auto를 사용하여 중앙에 배치할 수 있습니다.

표시/부동/위치의 삼각관계
요소를 절대 위치 또는 고정 위치로 설정하면 부동 속성이 무효화되고 표시도 블록 값으로 변경됩니다. 즉, 이때의 요소는 모두 블록수준의 요소이다.

display가 없음으로 설정되면 요소가 사라지고 설정된 위치 및 부동 속성은 당연히 의미가 없습니다.

위 내용은 CSS의 위치 속성에 대한 내용인데, 모두에게 도움이 되었으면 좋겠습니다.