기발자의 개발 노트 
이번 시간에는 position과 float 속성의 개념을 여러 번 사용했다. 아직도 position 속성의 속성값이 갖는 주요 특징이 헷갈린다면 다음 표를 차분히 살펴보길 바란다.
|
|
차원 |
부모 자식 간에 발생하는 마진 병합 현상 |
top, right, bottom, left 적용 |
자식의 높이 값이 부모에게 미치는 영향 |
z-index 적용 |
|
static |
2차원 |
O |
X |
O |
X |
|
fixed |
3차원 |
X |
O |
X |
O |
|
relative |
2차원, 3차원 |
O |
O |
O |
O |
|
absolute |
3차원 |
X |
O |
X |
O |
부모-자식 간에 발생하는 경우의 수를 모두 살펴봤다면 형제간에 발생하는 경우의 수도 살펴보는 것이 좋다. 형제간의 주요 특징은 차원을 기준으로 레이어가 겹치는 현상이 발생하는지를 중심으로 살펴보면 된다. 이 공식은 3차원 특징을 일부 갖고 있는 float 속성에도 똑같이 적용된다.
|
|
차원 |
레이어가 겹치는 현상 |
|
첫 번째 형제 |
2차원 |
X |
|
두 번째 형제 |
2차원 또는 3차원 |
|
|
차원 |
레이어가 겹치는 현상 |
|
첫 번째 형제 |
3차원 |
O |
|
두 번째 형제 |
2차원 또는 3차원 |
반복해서 말하지만 웹 사이트 레이아웃 작업을 원활하게 진행하려면 부모-자식 간, 형제간의 position과 float 속성의 특징을 모두 살펴보는 것이 중요하다. 이 특징을 파악하지 못하면 결코 자신이 원하는 방식으로 레이아웃 작업을 진행할 수 없다.