[CSS] position 정리

position 속성

글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성이며, position 값에 따라 위치를 정하는 기준이 달라진다.

기본 값은 static이고, static인 경우 원래 있어야 할 위치에 배치된다.

위치 정하기

위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있다.

 

 

 

top, right, bottom, left 속성 값이 모두 똑같은 경우  inset 속성을 쓴다.

 

 

---

relative 포지션

요소의 원래 위치를 기준으로 배치한다. 이때 요소의 원래 자리는 그대로 차지하고 있다.

 

.green {
  position: relative;
  top: 15px;
  left: 10px;
}

 

absolute 포지션

가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치된다.

포지셔닝이 되었다는 건 static이 아니라는 (position 속성을 지정했다는) 의미이다.

아래 예시에서는 .red가 relative 로 포지셔닝이 됐으므로 .blue는 .red를 기준으로 배치된다.

이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다.

 

 

.red {
  position: relative;
  top: 0;
  left: 10px;
}

.blue {
  position: absolute;
  right: 10px;
  bottom: 15px;
}

 

fixed 포지션

브라우저 화면을 기준으로 고정된 배치이다.

글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다.

따라서 겹치지 않도록 마진 등을 이용해 설정할 필요가 있다.

.red {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

sticky 포지션

static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치된다.

기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.

.red {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

z-index 속성

앞뒤 우선순위를 정할 때 쓰는 속성이며 순서기 때문에 단위 없이 쓴다.

값이 높을수록 화면에서 앞쪽에 보이며, 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 보인다.