CSS 레이아웃(1)
Position
1. position 속성
static은 position 속성의 기본 값으로, 원래 있어야 할 위치에 배치되며 일반적인 글의 흐름을 따른다.
만약 값이 모두 똑같은 경우는 'inset : 값'을 입력하면 된다.
2. relative
.green {
position: relative;
top: 15px;
left: 10px;
}
/* 위로 20px 움지여라 => top: -20px;처럼 작성해도 된다 */요소의 원래 위치를 기준으로 배치한다. 이때 요소의 원래 자리는 그대로 차지하고 있다.
margin-top과 margin-left의 차이점 : marign 속성에 의해 다른 요소들도 같이 맞추어서 움직이게 된다.
3. absolute
.red {
position: relative;
top: 0;
left: 10px;
}
.blue {
position: absolute;
right: 10px;
bottom: 15px;
}가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치된다. 이때 포지셔닝이 되었다는 건 static이 아니라는 의미이다. (position 속성을 지정했다는 의미) .red가 relative 포지션이어서 .blue는 .red를 기준으로 배치된다. 이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다.
4. fixed
.red {
position: fixed;
top: 0;
left: 0;
width: 100%;
}브라우저 화면을 기준으로 고정된 배치이다. 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. 그래서 내비게이션바를 만들거나 할 때 겹치지 않도록 마진을 넣어주기도 한다.
5. sticky
.red {
position: sticky;
top: 0;
left: 0;
width: 100%;
}static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치된다. 기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.
6. z-index
앞 뒤 순서를 정할 때 쓰는 값이다. 순서이기 때문에 단위 없이 사용한다. 값이 높을수록 화면에서 앞쪽이며, 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 보인다. (마이너스 값도 사용 가능)
* z-index가 내 맘대로 안될 때
z-index를 사용하다 보면 종종 동작하지 않을 때가 있다. 이럴 때 도움이 되는 것이 쌓임 맥략(Stacking Context)이라는 개념이다.
- z-index: 9999로도 해결이 안 되는 이유
<div class="red">
<div class="green"></div>
</div>
<div class="blue"></div>.red {
background-color: #e46e80;
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index: 1;
}
.green {
background-color: #32b9c1;
position: absolute;
width: 50px;
height: 50px;
top: 25px;
left: 25px;
z-index: 3;
}
.blue {
background-color: #5195ee;
position: absolute;
width: 100px;
height: 100px;
top: 150px;
left: 150px;
z-index: 2;
}어떤 색상 순서대로 보일 것 같은가? 초록, 파랑, 빨강 순서로 보일 것 같지만 실제로는 그렇지 않다. z-index: 3을 z-index: 9999로 바꾸어도 변화가 없을 것이다. 이유는 z-index 값은 단순히 서로 비교만 하는게 아니라, 쌓임 맥락 안에서 비교하기 때문이다.
* 쌓임 맥락(Stacking Context)
.red의 모든 자손 태그들(왼쪽 빗금)은 마치 .red와 마찬가지로 z-index: 1로 묶어서 생각할 수 있다. 그렇기 때문에 z-index: 3을 z-index: 9999로 바꾸어도 소용이 없다.
쌓임 맥락을 쓰면 좋은 점은, 쌓임 맥락 안에서는 바깥은 신경 쓰지 않고 z-index값을 쓸 수 있다는 점이다. HTML 태그가 엄청 많을 때 이러한 쌓임 맥락만 분명하다면 바깥은 신경 쓰지 않고 코드를 쉽게 쓸 수 있다.
1. 쌓임 맥락 만들기
- 문서의 루트 요소( <html> )
- position이 absolute이거나 relative이고, z-index가 auto가 아닌 경우
- position이 fixed이거나 sticky인 경우
- 플렉스박스나 그리드의 자식 중 z-index가 auto가 아닌 경우
- opacity가 1보다 작은 요소
2. z-index가 원하는 대로 동작하지 않을 때
거의 대부분은 쌓임 맥락이 만들어져서 그런 것이다. 이럴 때 가장 손쉬운 방법은 해당 요소를 쌓임 맥락 바깥으로 옮기는 것이다.
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>.green {
background-color: #32b9c1;
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
z-index: 3;
}3. z-index 값이 너무 많아지고 복잡해질 때
적절하게 쌓임 맥락을 만들어주면 된다. relative 포지션을 이용하면 간단하게 쌓임 맥락을 만들 수 있다.
<div class="container">
...
</div>.container {
position: relative;
z-index: 0;
}position: relative는 원래 위치를 기준으로 요소를 배치하는 것이다. 따로 값을 주지 않으면 원래 위치에 있게 된다. z-index의 기본 값은 auto인데, 0으로 지정한다고 해서 요소들 사이에 쌓이는 순서가 바뀌지는 않는다. (auto와 0의 가장 큰 차이는 쌓임 맥락을 만드느냐 아니냐의 차이이다.)
- 예) 내비게이션바를 만든다고 가정할 때, <header> 태그와 <main> 태그로 일단 영역을 2개로 나누고, <main>에 쌓임 맥락을 만들어 놓으면 <header> 태그는 무슨 일이 있어도 <main> 태그 안에 있는 것들 보다 앞쪽에 보일 것이다.
<header>
...내비게이션
</header>
<main>
...본문 내용
</main>header {
position: sticky;
top: 0;
z-index: 1;
}
main {
position: relative;
z-index: 0;
}