position속성은 요소에 사용되는 위치 지정방법의 유형(정적, 상대적, 고정, 절대 또는 고정)을 지정합니다.

position 속성

이 position속성은 요소에 사용되는 위치 지정 방법의 유형을 지정합니다.

5가지 위치 값이 있습니다.

• static
  
• relative
  
• fixed
  
• absolute
  
• sticky
  

요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 배치됩니다. 그러나 이러한 속성은 position속성을 먼저 설정하지 않으면 작동하지 않습니다.

또한, 위치 값에 따라 다르게 작동합니다.

position : static;

HTML요소는 기본적으로 정적으로 배치됩니다.

정적으로 배치된 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을 받지 않습니다.

position:static;을 갖는 요소는 특별한 방법으로 배치되지 않습니다. 페이지의 정상적인 흐름에 따라 항상 배치됩니다.

div.static {
    position: static;
    border: 3px solid #73AD21;
}

position : relative;

position:relative;을 갖는 요소는 일반적 위치에 상대적으로 배치됩니다.

상대적으로 배치된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 정상 위치에서 벗어나 조정됩니다.

다른 컨텐츠는 요소의 남은 틈에 맞춰 조정되지 않습니다.

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position : fixed;

position:fixed;를 갖는 요소는 뷰포트를 기준으로 배치됩니다. 즉, 페이지가 스크롤 되어도 항상 같은 위치에 유지됩니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 요소의 위치를 지정하는데 사용됩니다.

고정 위치된 요소는 일반적으로 위치한 페이지에 간격을 남기지 않습니다.

다음은 페이지의 오른쪽 아래에 요소를 고정시킵니다.

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position : absolute;

position:absolute;를 갖는 요소는 가장 가까운 위치에 있는 조상과 관련하여 배치됩니다. (뷰포트 기준이 아닙니다.)

그러나 절대 위치 요소에 조상이 배치되어 있지 않으면 문서 본문을 사용하고 페이지 스크롤과 함께 이동합니다.

** "위치된" 요소는 static을 제외한 그 어떤 위치중 하나입니다.

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

position : sticky;

position:sticky;을 갖는 요소는 사용자의 스크롤 위치를 기반으로 배치됩니다.

sticky 요소는 스크롤 위치에 따라 relative와 fixed사이에 토글합니다.

뷰포트에서 지정된 오프셋 위치가 충족될 때까지 상대적 위치에 배치된 다음 위치에 '고정'됩니다.(fixed같은)

** Internet Explorer, Edge 15그리고 이전 브라우저는 sticky 위치값을 지원하지 않습니다. 사파리 브라우저는 -webkit-접두사가 필요합니다. sticky값은 적어도 하나 이상의 top, right, bottom, left속성을 필요로 합니다.

아래 예는 sticky를 갖는 요소는 스크롤이 top:0에 도달하면 페이지 상단에 고정됩니다.

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

겹치는 요소들

요소가 배치되면 다른 요소와 겹칠 수 있습니다.

z-index속성은 요소의 스택 순서를 지정합니다. (요소는 다른 요소의 앞에 또는 뒤에 있어야 함)

요소는 양수 또는 음수 스택 순서를 가질 수 있습니다.

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

더 큰 스택 순서를 갖는 요소는 항상 스택 순서가 낮은 요소 앞에 위치합니다.

** 두 개 배치된 요소가 z-index지정 없이 겹치면 HTML코드의 마지막에 배치된 요소가 맨 위에 표시됩니다.