요소의 위치를 원하는 곳으로 이동 시킬 때 사용하는 속성이다.
이미지 위에 글자를 입히는 등 별도의 레이어가 겹쳐지는 형태나
브라우저 상단에 고정적으로 위치하는 메뉴는 position을 활용하여 만들 수 있다.
정적인 위치, 상대적인 위치, 절대적인 위치, 고정 위치 등이 있다.
<div class="static" style="top:40px; right:40px;></div>
position의 기본값. 정상흐름 대로 배열된다.
offset값이 변화는 일어나지 않지만, 값은 선언한대로 들어가게 된다.
<div class="relative" style="top:40px; left:40px;></div>
자기 자신을 상대적으로 움직인다.
top, left 좌표를 기본적으로 0,0 이라고 할 때 (40,40)로 이동한다.
절대적인 좌표를 갖게 됨으로써 display 값을 block으로 바꾼다.
문서의 흐름을 벗어나게 된다.
조상 요소 중 가장 가까운 요소의 position을 기준으로
조상 요소의 border를 제외한 padding 영역부터 기준점을 갖는다.
inline 요소에 선언하게 되면 display 값이 block으로 변경된다.
부모 요소의 위치나 문서의 흐름과 상관없이 브라우저의 좌표값을 기준으로 고정된 위치에 있다.
inline 요소에 선언하게 되면 display 값이 block으로 변경된다.
box가 겹치는 순서를 지정할 때 사용하는 속성이다.
position값이 static이 아닌 경우 지정 가능하다.
순서값이 없을 경우 생성순서(코드상 순서)에 따라 쌓인다.
부모가 z-index 값이 있을 경우 부모 안에서만 의미 있다.
큰 값이 가장 위쪽에 위치하고, 음수 사용 가능하다.