[CSS] absolute! 왜 자꾸 도망가니??
이번에 다루고자 하는 주제는 position. 그 중에서도 absolute에 대한 내용을 다루고자 한다.
position의 absolute에 대해 이야기하기 전에 간단하게 static, relative 속성들에 대해서도 언급하고 넘어가보도록 하자
position: static
position에는 static은 position의 default 속성으로 별도로 position 값을 주지 않는다면, 기본적으로 static 속성을 가지고 있게 된다. 여기서 static이 가진 특징은 html 문서에 작성한 요소의 순서(normal flow)에 따라 위치가 지정되게 된다.
글로만 보면 와닿지 않으니 예시를 통해 확인해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position</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>
body 요소 내의 순서대로 출력됨을 확인할 수 있다.
position: relative
단어 그대로 '상대적인' 위치를 가지는 것이 바로 postion: relative 속성이 되겠다. 그런데 무엇을 기준에 두고 상대적으로 위치를 잡는다는 말인가? 그것은 바로~~~ 원래 자신이 static일 때 있어야할 위치에 대해 상대적이라는 말이다! 백문이 불여일타! 한번 코드를 작성하여 예시를 살펴보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position</title>
<style>
.box1 {
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.box2 {
position: relative;
top: 20px;
left: 30px;
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>
box2에 position:relative 속성을 적용하고, top: 20px; left: 30px; 을 적용하였다. 브라우저에 출력된 결과를 나타내는 위 이미지와 같이 box2는 static 위치를 기준으로 box2의 top에서 밑으로 20px, left에서 왼쪽으로 30px 이동하였다.
자! 그럼 우리의 최종 목표인 abosolute를 살펴보자!
position: absolute
이제 box2의 position에 absolute 속성을 주었다. 다른 그것은 건들지 않았다! 아래의 코드와 브라우저 결과를 확인해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position</title>
<style>
.box1 {
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.box2 {
position: absolute;
top: 20px;
left: 30px;
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>
이런! box2가 완전 엉뚱한 곳에 위치함을 확인할 수 있다. 항상 도망가는 absolute! 으... ㅠㅠ 많은 초심자들에게 고민을 안겨주는 녀석임에는 분명하다!
하지만, abosolute도 아무런 이유없이 행동하는 것은 아니다! 브라우저의 결과를 살펴보면, body 요소의 top과 left를 기준으로 이동해 있음을 확인할 수 있다! 이는 곧 postion: absolute는 기본적으로 부모 요소, 여기서는 body 요소를 따르게 된다는 것을 확인할 수 있다.
또 다른 예시를 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position</title>
<style>
.grand-parent {
position: static;
background-color: limegreen;
margin: 150px 0;
padding: 50px;
width: 300px;
height: 300px;
}
.parent {
position: static;
background-color: rgb(205, 88, 209);
width: 300px;
height: 300px;
}
.box1 {
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.box2 {
position: absolute;
top: 20px;
left: 30px;
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="grand-parent">
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</div>
</body>
</html>
코드를 실행시키면 위와 같은 브라우저 출력결과를 확인할 수 있다. box2만 동떨어진 모습을 볼 수 있다.
여기서 grand-parent 클래스명을 가진 선택자에 position: relative를 적용해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position</title>
<style>
.grand-parent {
position: relative;
background-color: limegreen;
margin: 150px 0;
padding: 50px;
width: 300px;
height: 300px;
}
.parent {
position: static;
background-color: rgb(205, 88, 209);
width: 300px;
height: 300px;
}
.box1 {
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.box2 {
position: absolute;
top: 20px;
left: 30px;
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="grand-parent">
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</div>
</body>
</html>
따다~~ box2가 grand-parent 클래스의 top과 left를 기준으로 위치함을 확인할 수 있다. 여기서 멈추지 말고 이번에는 parent 클래스 선택자에게 position:relative를 적용하여 어떻게 변화하는지 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>position</title>
<style>
.grand-parent {
position: static;
background-color: limegreen;
margin: 150px 0;
padding: 50px;
width: 300px;
height: 300px;
}
.parent {
position: relative;
background-color: rgb(205, 88, 209);
width: 300px;
height: 300px;
}
.box1 {
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.box2 {
position: absolute;
top: 20px;
left: 30px;
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="grand-parent">
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</div>
</body>
</html>
이번에는 parent 클래스의 top과 left를 기준으로 box2가 위치하고 있음을 확인할 수 있다.
위 예제들을 통해 우리는 position: absolute는 부모 요소의 position: relatve를 벗어나지 못함을 알 수 있었다. 사실, 언급하지 않은 fixed, sticky 속성을 부모요소에게 줘도 position absolute는 해당 부모요소를 벗어나지 않는다. 하지만, fixed와 sticky는 별도의 주어진 역할이 있으므로 보통은 position:relative를 부모요소에게 주고, 자식 요소에게 position: absolute를 적용하게 된다.
마치며...
이번 포스팅을 마무리하며, 필자가 이해한 방식을 설명하고 글을 마치고자 한다. (느낌만 가져가자 ㅎㅎㅎ)
아이를 데리고 놀이터에서 숨바꼭질을 하기로한 부모는 아이가 숨바꼭질을 하는 동안 놀이터를 벗어나 숨지 않도록 하기 위해 놀이터에 position: relatve를 준다. 그러면 자식은 놀이터(position: relative)를 벗어나지 않고 자유롭게 숨바꼭질을 할 수 있게 된다.