CSS - Position

 

---

 

CSS Position

 

 * position 

- 문서상에 요소를 배치하는 방법을 지정한다. 

 

 

 static 

- 움직임 없이 고정적인 상태로 기본값이다. 

- HTML를 작성한 순으로 정상적인 흐름(normal flow)에 따라 위치가 고정된다. 

 

 

 relative 

- 자신이 있어야 하는 위치를 기준으로 움직인다. 

- 다른 콘텐츠들의 위치에 영향을 미치지 않는다. 

- 왼쪽 상단을 기준으로 값만큼 움직인다. 

.box{
  position:relative;
  top:50px;
  left:50px;
}

 

 

 absolute 

- 조상의 위치를 기준으로 움직인다. 이때 기준이 되는 조상은 static을 제외한 position 값을 가진 가장 가까운 조상이다.

- 일반적인 문서 흐름에서 자신의 요소(자리)를 제거하고 자리 잡는다.

.box{
  position:absolute;
  top:50px;
  left:50px;
}

 

 

 fixed 

- 브라우저 화면(뷰포트)을 기준으로 위치를 지정한다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아닌 값을 갖고 있다면 뷰포트 대신 그 조상을 기준으로 삼는다. 

※ transform 속성의 값으로 none 외의 것을 넣으면 새로운 지역 좌표 시스템을 생성한다.

브라우저 렌더링 순서상 reflow -> composite로 진행되기 때무에 해당 속성들에 의해서 위치가 변경된다. 

transform: translateX(0);

- 일반적인 문서 흐름에서 자신의 요소(자리)를 제거하고 자리를 잡는다. 

- 스크롤을 내리거나 올려도 화면의 같은 위치에 고정되어 있다. 

.box{
  position:fixed;
  bottom:50px;
  right:50px;
}

 

 

 sticky 

- 조상의 위치를 기준으로 자리 잡는다. 이때, 조상은 static을 제외한 position 속성 값을 가진 가장 가까운 조상이다.

- 스크롤 조정 시 같이 움직이다가 지정된 px 값에서 고정된다. 

.box{
  position:sticky;
  top:0;
  left:50px;
}

✏ fixed와 sticky의 차이점

- fixed는 어떤 경우에도 자기 고정 위치에서 움직이지 않는다. 

- sticky는 스크롤할 때 일반 문서의 흐름에 따라 움직이다가 상위 요소, 혹은 하위 요소에 다다르면 딱 달라붙는다.

✏ position 속성 때문에 다른 요소의 내용이 가려지지 않도록 주의해야 한다! 

 

 

 

---

 

 

 * z-index 

- position이 static 외의 값을 가진 박스에 대하여 z축의 위치를 지정한다. 
- 값이 클수록 레이어를 제일 위로 배치한다.
- 부모는 z-index를 높이더라도 자식 앞으로 나올 수 없다.
- 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있다. 
- 유지보수를 위해 100 단위로 작업하는 것이 좋다!

.a{
  z-index:10;
}
.b{
  z-index:1;
}

/* a가 b보다 앞에 배치된다 */

 

 

---

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!