CSS Layout - Position

intro

해당 내용은 코드잇 스프린트 23기 프론트엔드 과정 2주차에서의 배운 내용을 토대로 정리한 내용입니다.  

블로그 포스팅을 재밌게 시작하고 싶은데 아무래도 포스팅 경험이 많지 않다보니 어렵네요,,
앞으로 여러가지 개발 일지를 써보며 글쓰기 실력도 늘었으면 좋겠습니다.

2026년 새해복 다들 많이 받으세요 일단 나부터..

 

 

---

position 속성

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

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

 

---

위치 정하기

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

 

 

4방향이 모두 같을 경우, inset속성을 사용하면 됩니다.

 

---

 

 

✏️relative position

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

absolute의 기준점을 만들 때도 사용하고(부모 요소에게 relative주기),

원래 배치는 유지하되, 조금만 위치를 튜닝하고 싶을때도 사용합니다.

 

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

 

---

 

 

✏️absolute position

가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치됩니다. 이때 포지셔닝이 되었다는 건 static이 아니라는 의미입니다.

아래 예시에서는 .red가 relative포지션이어서 .blue는 .red를 기준으로 배치됩니다. 이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다.

쉽게 말해서 요소가 문서 흐름에서 빠지고, 어떠한 정해진 박스 안에서 딱 그 위치에 붙여두고 싶을 때 사용합니다.

 

 

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

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

 

 

---

 

 

✏️fixed position

 

브라우저 화면을 기준으로 고정된 배치입니다. 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다.

그래서 헤더 네비게이션을 만들때 겹치지 않도록 실습을 하기도 했습니다!

 

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

 

 

 

---

 

 

✏️sticky position

 

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

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

 

 

---

 

✏️z-index

 

앞뒤 순서를 정할 때 쓰는 값입니다. 순서기 때문에 단위 없이 씁니다. 값이 높을수록 화면에서 앞쪽입니다. 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 보입니다.

 

 

 

 

다음 포스팅은 css레이아웃의 Flexbox에 대해 올려보겠습니다.