안녕하세요. 오늘은 CSS의 position에 대해서 알아보도록 하겠습니다.
position은 엘리먼트 요소들의 위치를 어떻게 지정할 것인가를 결정하는 중요한 property인데요. property의 값에 따라 엘리먼트 요소들의 위치가 지정될 방법이 바뀌게 되고 top, left, right, bottom property로 위치를 확정 짓게 됩니다.
Position의 Values
static
엘리먼트 요소들의 기본값 입니다. 아무것도 지정 해주지 않으면 기본적으로 static이 적용 된다고 보시면 됩니다.
static으로 값이 설정 되어 있으면 top, left, right, bottom, z-index 의 값들은 적용 되지 않습니다. 일반적으로 각 엘리먼트에 성질에 따른 (block 요소 inline요소와 같은) 흐름대로 위치가 지정 됩니다. 이전에 배운 각 엘리먼트들이 가지고 있는 성질(block, inline 등)을 기준으로 위치가 잡히게 되죠.
// html
<html>
<head>
<title>position test</title>
<link rel="stylesheet" href="position-static.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
</body>
</html>
// css
.box1, .box2, .box3 {
width: 100px;
height: 100px;
border: solid 1px orangered;
background: yellow;
position: static;
}
.span1, .span2, .span3 {
position: static;
background: goldenrod;
}
relative
relative는 top, left, right, bottom, z-index 등을 이용하여 상대적인 위치를 지정해 줄 수 있습니다. 이렇게 명시적으로 위치를 지정해 주는 속성들을 사용하지 않는다면 static과 별반 다를게 없습니다. 여기서 주의 할 점은 말 그대로 상대적이라는 것 입니다. 자기 자신의 이전 엘리먼트 요소에 상대적으로 top, left, right, bottom 값이 잡히게 되는 것입니다. 즉, 원래 static 이었을 때를 기준으로 해서 위치가 조정 되게 됩니다.
// html
<html>
<head>
<title>position test</title>
<link rel="stylesheet" href="position-relative.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
</body>
</html>
// css
.box1, .box2, .box3 {
width: 50px;
height: 50px;
border: solid 1px orangered;
background: yellow;
}
.span1, .span2, .span3 {
background: goldenrod;
}
.box2 {
position: relative;
}
.box3 {
position: relative;
top: 10px;
left: 100px;
}
.span1 {
position: relative;
}
.span2 {
position: relative;
top: 10px;
right: 10px;
}
absolute
absolute도 top, left, right, bottom, z-index를 통해 위치를 지정합니다. 하지만 relative와는 방식이 조금 다릅니다. absolute는 위에서 말한 일반적인 흐름을 제거 합니다. 일반적인 흐름이라는 말은 앞서 말씀드린 것처럼 엘리먼트들은 static일때를 기준으로 위치가 잡힙니다. 하지만 absolute는 static 요소를 무시합니다. 부모 엘리먼트 중 static을 제외한 relative, absolute, fixed를 가지고 있는 엘리먼트가 없다면 기준점은 body가 되고 상위 엘리먼트로 올라가던 중 relative, absolute, fixed를 가지고 있는 엘리먼트가 있다면 그 엘리먼트가 기준점이 됩니다.
// html
<html>
<head>
<title>position test</title>
<link rel="stylesheet" href="position-absolute.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
<div class="box3-parents">
box3
<div class="box3-child">box3-child</div>
</div>
<div class="box4-parents">
box4
<div class="box4-child">box4-child</div>
</div>
</body>
</html>
// css
.box1, .box2 {
width: 50px;
height: 50px;
border: solid 1px orangered;
background: yellow;
}
.span1, .span2 {
background: goldenrod;
}
.box1 {
position: absolute;
top: 100px;
left: 100px;
}
.box2 {
position: absolute;
top: 30px;
left: 200px;
}
.span1 {
position: relative;
top: 250px;
}
.span2 {
position: absolute;
top: 265px;
}
.box3-parents {
width: 100px;
height: 100px;
top: 100px;
left: 300px;
background: green;
position: relative;
}
.box3-child {
position: absolute;
top: 20px;
left: 20px;
background: blueviolet;
}
.box4-parents {
width: 100px;
height: 100px;
background: rgb(15, 128, 0);
}
.box4-child {
position: absolute;
width: 50px;
height: 50px;
top: 10px;
left: 10px;
background: blueviolet;
}
다시 한 번 말씀드리자면 box3 와 box4을 봐주세요. box4 는 명시된 position 값이 없어 box4-child의 기준이 body로 넘어갔지만 box3은 parents 엘리먼트가 position이 relative로 설정 되어 box3-child의 기준점이 box3-parents가 된 것을 확인 할 수 있습니다.
fixed
fixed는 기준점이 그냥 보이는 화면이라고 생각 하시면 됩니다. 즉, 스크롤을 내려도 fixed 된 엘리먼트는 내가 지정 해준 항상 그 자리에 있습니다.
// html
<html>
<head>
<title>position test</title>
<link rel="stylesheet" href="position-fixed.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>
// css
body {
height: 1500px;
}
.box1, .box2 {
width: 50px;
height: 50px;
border: solid 1px orangered;
background: yellow;
}
.span1, .span2 {
background: goldenrod;
}
.box1 {
position: relative;
top: 200px;
left: 200px;
}
.box2 {
position: fixed;
bottom: 0;
right: 0;
}
.span1 {
position: relative;
}
.span2 {
position: relative;
top: 10px;
right: 10px;
}
box2 는 스크롤이 내려가도 항상 지정된 자리에 있는 것을 확인 할 수 있습니다.
