위치의 차이점은 무엇입니까? 정적, 위치 : 상대, 위치 : 절대 및 위치 : 고정?

위치의 차이점은 무엇입니까? 정적, 위치 : 상대, 위치 : 절대 및 위치 : 고정?

CSS의 position 특성은 요소의 위치 지정 방법을 지정하는 데 사용됩니다. 이 속성에는 static , relative , absolute 및 fixed 네 가지 주요 값이 있습니다. 각각에 대한 자세한 설명은 다음과 같습니다.

• 위치 : 정적 : 이것은 모든 요소의 기본값입니다. 요소에 position: static 문서의 정상 흐름에 따라 위치됩니다. top , right , bottom 및 left 속성은 정적으로 위치한 요소에 영향을 미치지 않습니다.
• 위치 : 상대 : position: relative 정상 위치에 비해 위치됩니다. top , right , bottom 및 left 속성을 사용하여 요소를 일반 위치에서 멀리 이동할 수 있습니다. 페이지의 다른 요소는 비교적 배치 된 요소가 여전히 원래 위치에있는 것처럼 배치됩니다.
• 위치 : 절대 : position: absolute 제거되며 페이지 레이아웃의 요소에 대한 공간이 생성되지 않습니다. 가장 가까운 위치에있는 조상에 비해 위치됩니다 (고정 된 것과 같은 뷰포트에 비해 배치하는 대신). 조상이 static 이외의 위치를 ​​갖지 않으면 초기 포함 블록 (일반적으로 요소)을 사용합니다.
• 위치 : 고정 : position: fixed 요소는 뷰포트와 관련하여 위치됩니다. 즉, 페이지를 스크롤하더라도 항상 같은 위치에 유지됩니다. top , right , bottom 및 left 속성은 위치를 결정하는 데 사용됩니다.

이러한 각 포지셔닝 방법은 요소가 문서 흐름 내에서 동작하는 방식과 다른 요소 및 뷰포트와 상호 작용하는 방식에 영향을 미칩니다.

요소의 스태킹 순서는 다른 CSS 위치 특성으로 어떻게 변경됩니까?

요소의 스태킹 순서 (또는 Z- 주문)는 position 특성과 함께 CSS z-index 속성에 의해 결정됩니다. 다른 포지셔닝 방법이 스태킹 순서에 어떤 영향을 미치는지 다음과 같습니다.

• 정적 포지셔닝 : position: static z-index 에 의해 정의 된대로 z- 주문에 참여하지 않습니다. 문서 소스에 표시된 순서대로 렌더링됩니다.
• 상대적, 절대 및 고정 포지셔닝 : position: relative , position: absolute 또는 position: fixed z-index 속성에 의해 Z- 주문을 제어 할 수 있습니다. z-index 값이 높은 요소는 z-index 값이 낮은 요소 위에 나타납니다.
• 스테이킹 컨텍스트 : static 이외의 위치 (및 auto 이외의 z-index )가 새로운 스택 컨텍스트를 설정하는 경우, 모든 하위 요소 가이 컨텍스트 내에서 렌더링됩니다. 이는 다른 스태킹 컨텍스트 내에서 요소의 z-index 값이 자체 컨텍스트 내에서만 비교됨을 의미합니다.

• 기본 스태킹 순서 : 스태킹 컨텍스트 내에서 요소는이 순서로 쌓입니다 (하단에서 상단까지).

  1. 스태킹 컨텍스트를 형성하는 요소의 배경과 경계.
  2. 음의 z-index 값을 갖는 배치 요소 (더 낮은 숫자가 먼저 쌓여 있음).
  3. 비 배열 요소 ( position: static ).
  4. z-index: auto 또는 z-index: 0 .
  5. 양의 z-index 값을 갖는 배치 요소 (더 높은 숫자가 마지막으로 쌓여 있음).

이러한 규칙을 이해하는 것은 웹 페이지에서 요소의 시각적 레이어링을 제어하는 ​​데 중요합니다.

위치를 사용하는 방법 : 상대 및 위치 : 함께 함께 레이아웃을 만들기 위해 절대적으로 함께 설명 할 수 있습니까?

position: relative 및 position: absolute 함께 복잡한 레이아웃을 만들기위한 CSS의 일반적인 기술입니다. 작동 방식은 다음과 같습니다.

1. position: relative : 부모 컨테이너는 position: relative . 이 설정은 position: absolute 전체 문서가 아닌이 컨테이너에 비해 배치됩니다.

    <code class="css">.parent-container { position: relative; }</code>

   로그인 후 복사

2. position: absolute : 부모 용기 내에 정확하게 배치하려는 아동 요소는 position: absolute 가져야합니다. 그런 다음 top , right , bottom 및 left 속성을 사용하여 부모에 대한 위치를 지정할 수 있습니다.

    <code class="css">.child-element { position: absolute; top: 10px; left: 20px; }</code>

   로그인 후 복사

   이것은 .child-element 10 픽셀을 상단에서, .parent-container 의 왼쪽에서 20 픽셀을 배치합니다.

다음은 HTML 및 CSS에서 어떻게 보일 수 있는지에 대한 예입니다.

 <code class="html"><div class="parent-container"> <div class="child-element">This is the child element</div> </div></code>

 <code class="css">.parent-container { position: relative; width: 300px; height: 200px; border: 1px solid black; } .child-element { position: absolute; top: 10px; left: 20px; background-color: red; }</code>

이 예에서, .child-element 상단에서 10 픽셀과 .parent-container 의 왼쪽에서 20 픽셀로 위치되며, 이는 검은 테두리가있는 300x200 픽셀입니다.

요소를 화면의 고정 된 위치에 유지하기 위해 어떤 CSS 위치 속성을 사용해야합니까?

스크롤링에 관계없이 화면의 고정 된 위치에 요소를 유지하려면 position: fixed 속성. 작동 방식은 다음과 같습니다.

• 사용법 : position: fixed 일반 문서 흐름에서 제거되며 페이지 레이아웃에서 공간이 생성되지 않습니다. 요소는 뷰포트에 대해 배치되므로 페이지가 스크롤 될 때 이동하지 않음을 의미합니다.
• 속성 : top , right , bottom 및 left 속성을 사용하여 뷰포트 내에서 고정 요소의 정확한 위치를 지정할 수 있습니다.

예는 다음과 같습니다.

 <code class="css">.fixed-element { position: fixed; top: 20px; right: 30px; background-color: blue; }</code>

이 예에서, .fixed-element 항상 상단에서 20 픽셀과 뷰포트 오른쪽에서 30 픽셀로 배치되며, 사용자가 페이지를 스크롤 할 때에도 제자리에 유지됩니다.

position: fixed 것은 내비게이션 막대, 헤더 또는 바닥 글과 같은 요소에 이상적이며 항상 화면에서 같은 지점에있는 요소에 이상적입니다.

위 내용은 위치의 차이점은 무엇입니까? 정적, 위치 : 상대, 위치 : 절대 및 위치 : 고정?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!