[html, css] position - relative, absolute, fixed

[html, css] 자주 쓰는 css 선택자(selector)

[html, css] box model

[html, css] position - relative, absolute, fixed

[html, css] flex - 반응형으로 정렬하기

[html, css] margin: auto - 가운데정렬, 푸터, 헤더, 양 옆에 붙는 내비게이션

 

position 은 html 요소의 위치를 설정할 수 있는 css 옵션이다.

static 은 기본값으로, html 에 선언된 대로 차곡차곡 쌓이고...

relative 는 원래 위치를 기준으로 위치를 설정한다는 옵션,

absolute 는 body 를 기준으로 위치를 설정한다는 옵션,

fixed 는 body 를 기준으로 위치를 설정하며 스크롤을 내려도 고정이 되는 옵션이다.

 

위치는 top, left, right, bottom 옵션으로 설정 가능하다.

position: relative;
top: 10px;
bottom: 20px;
...

 

또 absolute 와 fixed 는 요소들이 겹치게 되는데,

z-index 를 주어 어떤 요소가 위에 가고 아래로 갈지 설정할 수 있다.

See the Pen test by borajin (@borajin) on CodePen.