문서 레이아웃: float, position: static, relative, absolute, z-index

문서 레이아웃

1. float

- 현재 줄에서 다른 플로트된 요소의 가장자리나 담겨있는 블록의 가장자리에 닿을 때까지 정해진 방향으로 이동 (left, right, none)

- 요소의 폭을 지정해야 한다.

- 플로트 된 요소 밑에 다른 요소를 두고 싶지 않을 때에는 clear 속성 사용

- float를 적용시킨 블록은 다른 블록 위에 떠서 배치된다. (z-index 값이 높아진다.)

- float을 적용시킨 블록끼리 같은 z-index상에 위치한다.

2. position

1) Static (position: static;)

- 기본 설정값

- 입력된 순서대로 박스 나열

- z-index값은 위쪽에 선언된 블록일수록 낮고(아래쪽에 위치), 아래쪽일수록 높다.(위에 올라감)

2) Relative (position: relative;)

- static과 유사하게 일반적인 흐름을 따른다.

- 상대적으로 위치가 정해진 박스의 경우 원래 위치에서 옮겨진다.

- position:relative를 적용시킨 블록은 z-index값이 높아져서 다른 불록 위에 뜬다. 단, 해당 블록의 기존 위치는 여전히 해당 블록이 있는 것처럼 인식하여 비어있고 그 아래로 다른 블록들이 배치되게 된다.

- position:relative를 적용시킨 블록 이후의 블록도 position:relative를 적용시키면, 순차적으로 각기 다른 z-index상에 위치하게 된다. (float의 경우엔 같은 z-index상에 위치)

- 모두 relative가 적용되면 아래에 선언된 블록일수록 z-index가 높아 위에 뜬다.

3) Absolute (position: absolute;)

- 다른 콘테이너들과 독립적으로 위치를 완벽하게 통제할 수 있다.

- position:absolute를 적용시킨 블록은 z-index값이 높아져 위에 뜬다. 또한, 해당 블록의 기존 위치는 없어진 것으로 인식하여 그 아래에 있던 블록들이 위로 올라가버린다.

- 블록 이후의 블록도 position:relative를 적용시키면, 순차적으로 각기 다른 z-index상에 위치하게 된다. (맨 아래의 블록이 맨 위로 올라간다.)

- relative는 원래의 위치를 고수하고 위치가 변동되는 한편, absolute는 원래 위치가 없어지며 독립적으로 움직인다.

relative와 absolute를 사용하는 방법

- posiition에서 relative는 기준점. width, height를 정해준다.

- 이 기준점을 바탕으로 absolute로 레이아웃이 정해지며 top, left로 배치한다.

3. 박스 순서 정하기 (z-index)

- z-index 값이 높은 콘테이너가 앞에 그려진다.

- z-index의 값으로 음수나 다양한 값을 할 수 있다.