[FE] 📚 CSS에서의 Position

 

🤗 오늘의 위클리 페이퍼는

CSS에서의 'Position'에 대한 토픽입니다.

 

 

👉 CSS의 'Position' 속성은 요소를 배치할 때 사용되며, 다양한 값을 가지고

각각의 특징을 가지고 있습니다. 주요한 'Position' 속성들과 그 특징을 설명해 드리겠습니다.

---

 

 

1. static

 

 

• Position: static은 기본 값으로, 요소들이 문서의 일반적인 흐름에 따라 배치됩니다.
• top, right, bottom, left 속성을 적용해도 효과가 없습니다.

.element {
  position: static;
}

 

 

2. relative

 

 

• Position: relative은 요소를 일반 흐름에 따라 배치한 후, 자기 자신을 기준으로 위치를 조정합니다.
• top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있습니다.
  다른 요소에 영향을 주지 않고 위치 이동 가능합니다.

.element {
  position: relative;
  top: 20px;
  left: 10px;
}

 

 

 

 

3. absolute

 

 

• Position: absolute는 요소를 문서 흐름에서 제거하고, 가장 가까운 상위(relative, absolute, fixed)위치된
  조상 요소를 기준으로 배치합니다.
• 조상 요소 중 Position: static이 아닌 가장 가까운 요소를 찾아 위치를 결정합니다.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 20px;
}

 

 

 

4. Fixed

 

 

• Position: Fixed는 브라우저 전체 화면을 기준으로 고정된 배치입니다. top, bottom, left, right 속성은 브라우저의
  상, 하, 좌, 우에서 해당 요소가 얼마나 떨어져 있는지를 결정합니다. 스크롤해도 요소가 화면에 고정됩니다.
  
  

.element {
  position: fixed;
  top: 10px;
  right: 10px;
}

 

 

 

5. sticky

 

 

• Position: sticky는 요소를 일반 흐름에 따라 배치하다가(위치가 relative처럼 작동) 특정 위치(보통 스크롤 시 지정된 위치)에 도달하면 고정됩니다.
• top, bottom, left, right 속성을 사용하여 도달 시 고정할 위치를 지정합니다.

.element {
  position: sticky;
  top: 20px;
}

---

 

Position 속성을 이용하여 요소를 배치하고, 원하는 위치에 고정시킬 수 있습니다.

각 속성의 특징을 이해하고 적절히 활용하여 웹 페이지의 레이아웃을 구성할 수 있습니다.