이름에서처럼, position이란 웹페이지에서 저희가 만들었던 html 태그나 id, class 박스 등의 위치를 지정해주는 속성입니다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있습니다.
기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가집니다. 즉 html에 쓴 태그 순으로 위치가 지정되게 됩니다. 그래서 굳이 기입할 필요는 없지만, 부모 객체에서 다른 position 속성값이 주어졌을 때, 그를 무시하기 위해 사용될 때가 있습니다.
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<title>static</title>
<style>
.box1{
position:static;
background-color: green;
color:white;
width: 100px;
height: 100px;
}
.box2{
position:static;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
.box3{
position:static;
background-color: blue;
color:white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
이렇게 static은 차례대로 엘리먼트를 놓습니다!
단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있습니다. 그럼 대체 '무엇'에 상대적인지 궁금해하실 텐데요. 바로 static, 즉 원래 자신이 있어야 하는 위치에 상대적입니다. relative는 그 누구보다도 자신이 원래 있던 자리를 기억하는 친구입니다. 그래서 position: relative;라는 값을 주고 left : 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 됩니다.
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<title>relative</title>
<style media="screen">
.box1{
position:static;
background-color: green;
color:white;
width: 100px;
height: 100px;
}
.box2{
position:relative;
left: 40px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
relative 속성을 주어 box2가 원래 있어야 할 자리에서 왼쪽으로 40px 떨어뜨린 모습입니다.
absolute의 특징을 굳이 한 단어로 설명하자면 'my way'라고 할 수 있습니다. position: absolute;라고 한 뒤 top : 20px; right: 30px;이라고 추가적 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 보실 수 있습니다. 이들은 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 됩니다.
그러나, 이 absolute도 눈치를 보는 속성이 있다면, 바로 relative입니다. relative 속성이 부모로 놓여있다면, absolute는 relative 박스 내를 기준으로 위치하게 됩니다. 마치 relative가 static의 자리를 유념하고 있는 것처럼요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative-absolute</title>
<style>
.box1{
position:relative;
top:40px;
background-color: green;
color:white;
width: 100px;
height: 100px;
}
.box2{
position:absolute;
top: 40px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
.box3{
position: absolute;
top: 30px;
left: 30px;
background-color: blue;
color:white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box3">box3</div>
<div class="box1">box1
<div class="box2">
box2
</div>
</div>
</body>
</html>