[chap3] position , layout
position 속성이란?
웹 문서 안의 요소들을 자유자재로 배치해 주는 속성이다.
static, relatice, absolute, fixed, sticky 중 하나의 값으로 지정할 수 있다.
- static 기본값. 요소를 문서의 흐름에 따라 배치한다
- relative 문서 흐름에 따라 배치하되, 상하좌우 오프셋을 적용할 수 있다.
- absolute 문서 흐름에서 제외. 부모요소에 대해 상대적으로 오프셋 적용
- fixed 문서 흐름에서 제외. 지정한 위치에 고정
- sticky 문서 흐름에서 제외. 스크롤 동작이 존재하는 가장 가까운 요소에 오프셋 적용
static을 제외한 나머지 속성 값에서는 좌표를 이용해 요소의 각 위치를 조절할 수 있다.
top, right, bottom, left 속성으로 요소를 배치할 최종 위치를 지정한다.
헷갈릴 수 있는 부분을 예로 들자면, top:10px;이 있다. 이는 위로 10픽셀을 옮기는 게 아니라 top을 기준으로 10px을 떨어뜨린다고 생각하면 된다.
여기에 이제 각각의 자식요소에 left:20px; 씩 입력줘보자
static이 아무런 포지션변화를 주지 않았을 때의 모습.
relative는 static 상태에서 20px이 움직인 상태
absolute는 부모요소의 시작점(border의 안쪽)부터 20px
fixed는 다 무시하고 그냥 뷰포트 끝자락부터 20px, 또한 fixed는 스크롤을 내려도 그 위치에 계속 떠있다
absolute의 박스가 작아진 이유는 position:absolute;를 부여함으로써
부모의 틀(노란박스)로 부터 벗어나 자유의 몸이 되었기 때문에
content의 크기만해진것
여기서 중요한 건!!
부모요소에도 position을 부여해주는 것이다.
class='mom'에 position을 주지 않았더라면(position= static;의 상태라면)
absolute(id='abs')도 fixed와 같은 위치에 있었을 것이다.
머리아파서
깊은 내용은 나중에 다시와서 보충하겠습니다
아아아아악
z-index
https://developer.mozilla.org/ko/docs/Web/CSS/z-index