Positioning
CSS를 이용해서 브라우저를 꾸미고, positioning을 이용해서 여러 요소를 적절한 곳에 배치할 수 있다.
position
요소의 위치 지정 기준이다. 요소를 배치할 때는 기준을 잡고나서 위치 값을 설정해야 된다.
-
static: 요소를 문서의 흐름에 맞춰 배치. 기준 없음. -
relative: 요소 자신을 기준으로 한다. -
absolute: 위치 상 부모 요소를 기준으로 한다.position: absolute를 스타일 적용했을 때는 해당하는 부모 요소에position: relative스타일을 추가해야 된다. 왜냐하면 absolute는 기준을 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소를 기준으로 하기 때문이다.
-
fixed: viewport(브라우저)를 기준으로 한다.
top, bottom, left, right, z-index 속성을 position과 같이 사요할 수 있다. 그리고 좌푯값은 양수, 음수 모두 사용 가능하다.
position 속성의 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 바뀐다. 일반적으로 블록 요소는 가로 너비가 최대한으로 늘어나려고 하지만 position이 absolute, fixed인 경우에는 가로 너비가 최소한으로 줄어들려고 한다.
요소 쌓임 순서(stack order)
어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정하는 것이다.
-
요소에 position 속성의 값이 있는 경우 위에 쌓인다. (기본값이 static인 경우는 제외)
-
1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓인다.
-
1번과 2번 조건이 같은 경우, HTML의 다음 구조일수록 위에 쌓인다.
z-index
-
요소의 쌓임 정도를 지정한다.
-
값이 작을수록 아래에 쌓이고 클수록 값이 작은 요소보다 위에 쌓인다. 음수도 사용할 수 있다.
-
기본값을 0이라고 생각하면 이해하기 쉽다.
-
값을 명시하지 않을 경우에는 웹 문서에 맨 먼저 삽입하는 요소가 값: 1을 가지고 그 후 삽입하는 요소들은 점점 값이 커진다고 생각하면 된다.
요소의 보여짐
visibility
특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성
- visibel : 기본값
- hidden : 화면에서 요소를 감춥니다. 하지만 크기는 그대로 유지하기 때문에
overflow
요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성
- visible : 기본값, 넘친 내용을 그대로 보여준다.
- hidden : 넘친 내용을 잘라내서 보이지 않음.
- auto : 넘친 내용이 있는 경우에만 잘라내고, 스크롤바를 생성한다.
