레이아웃 내에서 세부 요소들의 위치를 설정하는 position과, 겹쳐있는 대상의 우위를 결정하는 z-index에 대한 정리.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right">
<p class="box1"></p>
<p class="box2"></p>
</div>
</div>
</body>
</html>@charset 'utf-8';
/* reset */
* {margin: 0; padding: 0;}
ol,ul,li {list-style: none;}
a {outline: 0; text-decoration: none;}
img {border: 0;}
.wrap {
width: 800px;
border: 10px solid #000;
margin: 50px auto;
}
.left {
width: 400px;
height: 400px;
background-color: pink;
float: left;
}
.right {
width: 400px;
height: 400px;
background-color: lightblue;
float: left;
}
.wrap:after {content:''; display: block; clear: both;}
.box1 {
width: 200px;
height: 200px;
background-color: blue;
bottom: 50px;
right: 50px;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
top: 50px;
left: 50px;
}
큰 덩어리는 float로 배치하지만, 각각의 레이아웃 영역 안에서 작은 요소들을 배치할 때 position을 사용한다.
예시를 보면 float로 구성된 left와 right가 있고, right의 자식요소인 box1과 box2가 right 내부에서 좌상단부터 차례대로 배치된다. 일반적인 경우이다.
Absolute 적용
.box1 {
width: 200px;
height: 200px;
background-color: blue;
bottom: 50px;
right: 50px;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
top: 50px;
left: 50px;
}
position: absolute;
absolute는 말 그대로 절대값이다. 해당 속성이 걸린 요소가 문서에서 강제로 뜯어져나와 설정한 좌표값 위치로 얹혀진다.
그러나 그냥 넣으면 의도와 다른 위치로 이동한다. 부모요소인 right 내부에서 이동하지 않고 아예 벗어난 것을 볼 수 있다. 별도의 설정이 되어있지 않다면 브라우저의 좌표값 기준은 화면 전체이기 때문이다.
Relative 적용
#wrap .right {
width: 400px;
height: 400px;
background-color: lightgreen;
float: left;
position: relative;
}
position: relative;
box1, box2가 정렬되기를 원하는 직계 부모에게 relative를 적용하면 기준점이 해당 부모로 고정된다. 해당 부모를 기준으로 box에 설정한 위치값이 적용되어 정렬된 모습을 볼 수 있다.
z-index
.box1 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
bottom: 50px;
right: 50px;
z-index: 2;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
position이 적용된 요소들이 겹쳐있는 경우, z-index를 부여해 어느 오브젝트가 위쪽으로 노출되게 할 지 설정할 수 있다.
숫자값이 클 수록 위로 올라온다. box1과 box2이 겹쳐있는 부분에 z-index값이 설정되어 겹침이 바뀐 것을 확인할 수 있다.
position에 대해 정리해보았다. relative로 설정하는 기준점은 때에 따라 직계 부모가 아니어도 먹힐 때도 있지만, 유지보수 차원에서 습관적으로 써주는 편이 좋다고 한다. 기준점이 될 부모에겐 relative, 옮길 자식에겐 absolute. 그리고 레이어처럼 겹쳐져있는 대상의 앞뒤를 구분할 때는 z-index를 사용하면 되겠다.
position에는 여러 속성이 있지만, 레이아웃에는 relative와 absolute가 제일 많이 쓰인다. 큰 틀은 float(+flex)로 정하고, 세부 요소들의 위치는 position으로 배치한다. 이를 잘 활용하면 일반적인 대부분의 레이아웃을 구성할 수 있다. 그만큼 웹사이트 제작에 기본적으로 쓰이는 기능이니, 잘 익혀두어야겠다.
