Position 속성

position 속성

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

position:

• static
• relative
• absolute
• fixed
• sticky

static

• position 속성의 기본 값
• 원래 있어야 할 위치에 배치

위치 정하기

top, bottom, left, right를 사용해 지정한다.
값이 모두 똑같을 경우엔 inset 속성을 사용한다.

relative

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

margin과 다른 점
margin을 사용하면 그 이후의 것들도 위치가 이동하는데 relative를 사용하면 해당 것만 이동한다.

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

absolute

가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치된다. 이때 포지셔닝이 되었다는 건 static 이 아니라 (position 속성을 지정했다는) 의미다.

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

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

fixed

브라우저 화면을 기준으로 고정된 배치다. 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. 그래서 네비게이션을 만들거나 할 때 겹치지 않도록 마진을 넣어주면 좋다.

상단 헤더나 하단의 광고 배너, footer등에 주로 사용된다.

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

sticky

static 처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed 처럼 고정되어 배치된다. 기본적으로 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.

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

z-index 값

앞뒤 순서를 정할 때 쓰는 값이다. 화면에서 더 위에서 보일 것을 지정해 줄 때 사용하는데, 일반적으로 코드에서 아래에 적혀있는 코드일 수록 화면에서 더 위에 보이지만, z-index를 사용하면 지정해서 순서를 정할 수 있다.
z-index=1; 이런 형식으로 사용한다.
만약 z-index의 값이 같다면, 코드에서 더 아래 줄에 있는 요소가 앞쪽에 보인다.