[CSS] position, position_offset, z-index

position

항목	설명
초기값	static
상속	X

1. 값

relative

상대배치방식 : 본래 자신의 위치를 기준으로 지정한 offset 속성의 값만큼 떨어져서 배치되는 방식. 다른 요소의 위치에는 영향을 주지 않음

absolute

절대배치방식 : 요소가 포함된 부모를 기준으로 지정한 offset 속성의 값만큼 떨어져서 배치되는 방식.
문서의 일반적인 흐름을 따라 배치되지 않기 때문에, 다른 요소들의 배치 위치에 영향을 줌

• absolute 요소는 가장 가까운 상위 요소가 static이 아닐 경우, 그 요소(containing 요소라고 불림)를 기준으로 배치된다.
• 상위 요소가 모두 static(기본값)이면 body를 기준으로 배치됨.

fixed

고정배치방식 : absolute와 비슷하지만, fixed는 스크린을 기준으로 배치됨.
본문 요소가 스크롤되더라도, fixed 요소는 항상 같은 위치에 배치됨

offset 속성 (top / right / bottom / left)

항목	설명
초기값	auto
상속	X

1. 값

auto

기본값.
absolute로 배치된 요소의 경우, right:auto 일 때는 contents edge로부터의 left offset처럼 작용한다.

length

• absolute로 배치된 요소의 경우 : 정수값. 양수, 0, 음수 모두 적용 가능하다. containing 요소의 padding edge로부터의 offset이다.
• relative로 배치된 요소의 경우 : 본래 자신의 위치를 기준으로(containing 요소가 static, normal flow) offset 방향으로부터 값만큼 이동한다. (=offset 반대 방향으로 값만큼 이동한다)

percentage

정수값. 음수도 가능하다.
left, right의 경우 containing 요소의 width를 기준으로, top, bottom의 경우는 height를 기준으로 적용됨.

2. 렌더링 방식

• 절대 배치 방식의 offset 속성 적용 : containing 요소가 블럭레벨일 때 적용된다.
  containing 요소의 padding edge로 부터의 offset을 적용시키는 것임.

• 상대 배치 방식의 offset 속성 적용 : containing 요소의 contents edge에서 offset 방향으로부터 값만큼 이동함

참고

z-index

항목	설명
초기값	auto
상속	X
적용대상	positioned E

stacking context 만들기가 가능한 속성이다. (stacking ≒ layering)

1. 값

auto

stacking context를 만들지 않는다.
요소의 stacking level은 부모의 것과 같다.

position된 요소는 태그 순서에 따라 stacking 순서가 정해진다.
순서상 앞에 오는 요소보다 뒤에 오는 요소가 더 stacking 순서가 높다.

z-index의 초기값은 auto이기 때문에, position된 요소 끼리는 z-index를 통해 staking 레벨이 적용된다.

integer

자연수! 음수값은 IE에서 렌더링되지도 않는다.

​