[23~24일차] position / 개인 프로젝트 진행

20220822(월)

• 목차
  - position
  - 개인 플젝 진행

---

< position >

• position 이란?
  - html 문서에서 element를 배치하는 방법
  - element의 위치를 지정하는 방법
  
  
  
• static  기본값 
  
  
• relative  자기 자신 기준으로 배치
  - 일반적인 문서 흐름에 따라 배치

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

 

• absolute  부모 요소를 기준으로 배치
  - 일반적인 문서 흐름에서 재거하고, 페이지 레이아웃에 공간도 배정 X
  - 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
  - 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}

 

• fixed  뷰포트 기준으로 배치
  - absolute와 비슷하지만 항상 새로운 쌓임 맥락을 생성

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

 

• sticky  스크롤 영역 기준으로 배치 
  - 일반적인 문서 흐름에 따라 배치
  - 스크롤 동작이 존재하는 가장 가까운 조상에 달라 붙는다.

#one { position: sticky; top: 10px; }

 

 

 

 

출처 : https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN