TIL09.positioning

조연정·2020년 7월 30일
0
post-thumbnail

포지셔닝을 통해 다양한 위치이동을 시도해보자.

포지셔닝

css 포지셔닝을 이용해서 웹 문서의 레이아웃을 다양한 방식으로 지정할 수 있다.
텍스트나 이미지를 나란히 배치하거나, 여러 요소를 가로/세로로 원하는 곳에 배치가 가능하다.

포지셔닝의 종류

position:static

자식요소의 크기에 따라서 부모요소의 크기가 자동으로 변경되며, 속성값을 따로 지정하지 않으면 기본적으로 static의 값이 주어진다. 원래 있어야 할 곳에 위치한다고 생각하면 쉽다.
left, top, right, bottom과 같은 offset이 무시된다.

position:relative

자신의 위치를 기준으로 한 상대위치 값을 지정한다. 자식요소의 크기에 따라서 부모요소의 크기가 자동으로 변경되지만, 요소의 위치에 따라서는 변경되지 않는다.(margin을 사용하면 ) 겹치는 레이아웃을 원할 때 사용된다.

b {
  background-color: orange;
  position:relative;
  top: 30px;
  }


(본래 위치에서 위로 30px간격을 주어 이동한다. 다른 요소의 위치는 변경되지 않는 것을 확인할 수 있다.)

position: fixed

문서를 기준으로 위치가 정해지기 때문에 부모요소의 위치와는 무관하며, 요소의 크기가 부모요소의 크기에 반영되지 않는다. relative는 원래 있던 공간이 비어 공백이 되지만, fixed는 원래 공간과 상관이 없어진다. 스크롤 영향을 받지 않기 때문에
스크롤을 내려도 바로 그 위치에 표현된다. navbar에 많이 사용된다.

position: absolute

가장 가까운 포지셔닝이 된 조상요소가 기준이 된다. 자식요소 크기에 따라서 부모요소의 크기가 자동으로 변경되지만, 요소의 위치에 따라서는 변경되지 않는다.

(.blue의 가장 가까운 포지셔닝이 된 요소가 .red이기때문에 .green을 건너뛰고 레드디브를 기준으로 포지셔닝이 된다.

profile
Lv.1🌷

0개의 댓글