CSS Position(위치)

CSS position 속성은 요소가 페이지에서 어떻게 정위치되는지 지정합니다. CSS Position(정위치) 방식은 다음과 같습니다: 정적 정위치(static), 절대 정위치(absolute), 상대 정위치(relative), 고정 정위치(fixed).

CSS 정위치 방법

웹 페이지에서 요소를 적절히 정위치하는 것은 좋은 레이아웃 디자인에 필수적입니다. CSS에서는 요소를 정위치하는 데 사용할 수 있는 여러 가지 방법이 있습니다. 다음 장에서는 이러한 정위치 방법을 하나씩 소개할 것입니다.

정적 위치(static)

정적 위치의 요소는 항상 페이지의 정상적인 흐름에 따라 정위치됩니다. HTML 요소는 기본적으로 정적 위치에 있습니다. 정적 위치의 요소는 다른 요소에 영향을 미치지 않습니다.top,bottom,left,right,와절대 위치의 요소는 정상적인 흐름에서 완전히 빠져나갑니다. 따라서 동급 요소를 배치할 때 공간을 차지하지 않습니다. 그러나,-z특성.

요소의 position 속성 값이 지정되지 않았을 때, 즉 기본적으로 요소는 정적 위치입니다. position 속성을 지원하는 모든 HTML 객체는 기본적으로 static으로 설정됩니다. static은 position 속성의 기본 값으로, 블록이 원래 위치에 남아 있고 재정위치되지 않음을 의미합니다.
결국, 일상에서는 'position:static'을 거의 사용하지 않지만, 요즘은 요소 위치를 제어하기 위해 JavaScript를 사용할 때, 다른 위치 방식의 요소가 정적 위치로 변할 때는 'position:static;'을 사용하여 구현해야 합니다.

예제
　　　　padding:　2left:
　　　　padding:7background: #765dc
0px;

;

상대 위치(relative)

상대 위치의 요소는 정상적인 위치에 대해 정위치됩니다.- 상대 위치 구성에서 요소의 상자 위치는 정상적인 흐름에 따라 계산됩니다. 그런 다음, 속성/또는 top 또는 bottom과

예제
　　　　또는 right를 통해 상자를 기본 위치에서 벗어내기.
　　　　00px;　10left:
0px;

상대 위치의 요소는 이동할 수 있으며 다른 요소와 겹칠 수 있지만, 정상적인 흐름에서 최초로 그 자리를 잡은 공간을 유지합니다.

절대 위치(fixed)

절대 위치의 요소는 비정상적인 위치를 가진 첫 번째 부모 요소에 대해 정위치됩니다. 이러한 요소를 찾지 못하면, 브라우저 창의 "왼쪽 상단"에 대한 페이지에 배치됩니다. 또한, top, right, bottom, 및 left를 지정하여 사용할 수 있는 추가적인 위치 조정 속성을 사용할 수 있습니다.절대 위치의 요소는 정상적인 흐름에서 완전히 빠져나갑니다. 따라서 동급 요소를 배치할 때 공간을 차지하지 않습니다. 그러나,-zindex속성 값은 다른 요소와 겹칠 수 있습니다. 또한, 절대 위치의 요소는margin

예제
　　　　그리고 그들은 다른 어떤 margin과도 결합되지 않습니다.
　　　　position: fixed;　2top:
　　　　00px;　10left:
0px;

position: fixed;

고정 위치(fixed)

고정 위치는 절대 위치의 서브 카테고리입니다.

예제
　　　　.box {
　　　　position: fixed;　2top:
　　　　00px;　10left:
0px;