CSS의 position 속성은 웹 페이지에서 요소의 레이아웃을 제어하는 데 사용되는 강력한 도구입니다. 요소가 모 컨테이너 또는 뷰포트 내에 위치하는 방법을 지정하여 다양한 레이아웃 효과를 만드는 데 사용할 수 있습니다. position 속성은 static , relative , absolute , fixed 및 sticky 등 여러 값을 수용하여 각각 다른 레이아웃 동작을 제공합니다.
position: relative; 그런 다음 top , bottom , left 및 right 속성을 사용하여 일반 위치에서 상쇄 할 수 있습니다. 요소는 여전히 정상적인 위치에있는 것처럼 레이아웃의 공간을 차지합니다.position: absolute; 가장 가까운 위치에있는 조상에 비해 위치됩니다 (고정 된 것과 같은 뷰포트에 비해 배치 대신). 절대 배치 요소에 조상이 배치되지 않은 경우 문서 본문을 사용하고 페이지 스크롤과 함께 움직입니다.position: fixed; 브라우저 창에 상대적으로 배치됩니다. 페이지가 스크롤 될 때 이동하지 않고 일반 문서 흐름에서 제거됩니다.position: sticky; 상대 및 고정 위치의 하이브리드입니다. 요소는 지정된 임계 값을 가로 질 때까지 relative 위치로 처리되며,이 시점에서 fixed 위치로 처리됩니다. 이러한 포지셔닝 방법을 사용하면 겹치는 요소, 고정 헤더, 사이드 바 또는 스크롤하는 동안 뷰포트를 고수하는 요소와 같은 복잡한 레이아웃을 만들 수 있습니다. 예를 들어, absolute 포지셔닝을 사용하여 페이지 컨텐츠 중앙에있는 모달 창을 만들거나 스크롤 할 때 뷰포트의 상단에 유지되는 탐색 표시 줄에 대한 fixed 포지셔닝이있을 수 있습니다.
CSS 레이아웃을 마스터하는 데는 absolute , relative 및 fixed 포지셔닝의 차이점을 이해합니다.
position: absolute; 일반 문서 흐름에서 제거됩니다. 그 위치는 가장 가까운 위치 조상에 비해 결정됩니다. 조상 요소가 static 이외의 위치가없는 경우, 요소는 초기 포함 블록 (일반적으로 html 또는 body 요소)에 비해 위치됩니다. 절대 포지셔닝은 요소가 겹치거나 정확하게 배치 해야하는 복잡한 레이아웃을 만드는 데 유용합니다.position: relative; 정상적인 문서 흐름에 남아 있습니다. 그러나 top , right , bottom 및 left 속성을 사용하여 위치를 조정할 수 있습니다. 요소가 정상 흐름에서 점유했을 공간은 보존됩니다. 이러한 유형의 위치는 종종 요소의 레이아웃을 미세 조정하거나 절대적으로 위치가있는 어린이 요소에 대한 위치를 만드는 데 사용됩니다.position: fixed; 절대 포지셔닝과 유사한 일반 문서 흐름에서 요소를 제거합니다. 그러나 요소는 조상 요소가 아닌 브라우저 창에 비해 배치됩니다. 이것은 페이지가 스크롤 된 경우에도 요소가 같은 위치에 남아 있음을 의미합니다. 고정 포지셔닝은 일반적으로 고정 헤더, 바닥 글 또는 사이드 바를 만드는 데 사용됩니다. 주요 차이점은 참조 지점에 있으며 문서 흐름에 영향을 미칩니다. absolute 위치가있는 조상을 사용하고, relative 요소의 정상 위치를 사용하고, fixed 뷰포트를 사용합니다. 각각의 특정 사용 사례가 있으며 원하는 레이아웃을 달성하기 위해 결합 할 수 있습니다.
웹 페이지의 레이어링 요소는 position 특성과 z-index 속성을 모두 사용하는 것입니다. z-index 속성은 요소의 스택 순서를 지정하여 요소가 겹칠 때 어떤 요소가 다른 요소 앞에 나타나야하는지 결정합니다.
레이어링을 달성 할 수있는 방법은 다음과 같습니다.
relative , absolute , fixed 또는 sticky )을 사용하여 계층화하려는 요소를 배치해야합니다. 배치 된 요소 만 z-index 속성을 설정할 수 있습니다. z-index 적용 : 요소가 배치되면 z-index 속성을 사용하여 스태킹 순서를 제어 할 수 있습니다. z-index 값은 양수 또는 음의 정수 일 수 있습니다. z-index 값이 높은 요소는 z-index 값이 낮은 요소 앞에 나타납니다.
<code class="css">.element1 { position: absolute; z-index: 1; } .element2 { position: absolute; z-index: 2; }</code> 이 예에서 .element2 .element1 앞에 나타납니다.
z-index 특정 스태킹 컨텍스트 내에서만 적용됩니다. 요소가 다른 스태킹 컨텍스트에있는 경우, z-index 값은 해당 컨텍스트 내에서만 비교됩니다. 새로운 스태킹 컨텍스트는 다른 속성 중에서도 auto 이외의 z-index 값을 갖는 요소에 의해 생성됩니다. position 및 z-index 신중하게 관리함으로써 드롭 다운 메뉴, 모달 대화 상자 또는 계층 이미지 갤러리와 같은 복잡한 계층 디자인을 만들 수 있습니다.
예, 포지셔닝은 실제로 반응 형 디자인을 만드는 데 사용될 수 있지만 최상의 결과를 얻으려면 다른 CSS 기술과 결합해야합니다. 포지셔닝이 반응 형 디자인에 기여할 수있는 몇 가지 방법은 다음과 같습니다.
미디어 쿼리 : 미디어 쿼리를 사용하여 다른 화면 크기에 따라 position 속성을 조정할 수 있습니다. 예를 들어, 사이드 바는 더 큰 화면에 fixed 되어 있지만 작은 화면에서는 static 될 수 있습니다.
<code class="css">@media (max-width: 768px) { .sidebar { position: static; } }</code>absolute 포지셔닝을 사용하여 응답 성을 유지하면서 요소를 정확하게 정렬 할 수 있습니다. 상대 사이징 : top , right , bottom 및 left 를 사용하는 경우 위치를 사용하여 고정 장치 대신 백분율을 사용하여 레이아웃이 다른 뷰포트 크기에 적응되도록 고려하십시오.
<code class="css">.element { position: absolute; top: 10%; right: 20%; }</code>position: sticky; 더 큰 화면에서 뷰포트 상단에 달라 붙지 만 작은 화면에서 다르게 행동 할 수있는 반응 형 헤더 또는 내비게이션 막대를 작성하는 데 특히 유용 할 수 있습니다.absolute 또는 fixed 위치를 사용하면 이미지 갤러리 또는 회전 목마와 같은 다양한 화면 크기에 적응하는 겹치는 요소를 만들 수 있습니다.포지셔닝만으로는 완전히 반응 형 디자인을 만들 수는 없지만 미디어 쿼리, 유연한 그리드 및 상대 크기와 같은 다른 CSS 기능과 함께 사용될 때 반응 형 디자인 전략의 중요한 부분이 될 수 있습니다.
위 내용은 위치 속성을 사용하여 다른 레이아웃 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
