position을 조지려고 한다. css는 개월 수로 따지면 2개월은 한 거 같은데 제대로 정리를 안 해서 그런지 할 때마다 헷갈린다.
모든 태그는 기본적으로 position: static
이다. 이제 태그를 옮기고 싶을 때 position: relative
를 사용하게 된다.
앙증맞은 relative 박스가 홀로 있다. 여기에 position: relative
를 첨가하여 left:50px
을 주어야겠다.
left
에서 50px 만큼 떨어진 것을 육안으로 확인할 수 있다. 반대로 left
쪽으로 50px 만큼 가게 만들고 싶으면 음수를 사용하면 된다.
position: relative
가 static인 상태를 기준으로 px만큼 움직였으면 이름부터 멋진 position: absolute
는 절대적인 권능을 주체하지 못해 parent의 position을 기준으로 한다(static은 제외)
html
<div>
<div class="absolute">absolute</div>
</div>
<div class="parent">
<div class="child">child</div>
</div>
독고다이 absolute div과 parent가 있는 child div이 있다.
css
.absolute {
background: red;
position: absolute;
right: 0;
}
.parent {
position: relative;
width: 100px;
height: 100px;
background: blue;
}
.child {
background:black;
position: absolute;
right: 0;
color:yellow;
}
.absolute
는 부모 태그 중 position: relative
가 없기 때문에 body
를 기준으로 오른쪽에 붙었다. 반면 .child
는 position을 가진 parent가 있기 때문에 파란 박스 안에서 오른쪽으로 붙어버린 것을 알 수 있다.
<div class="parent">
<div class="fixed">fixed</div>
<div class="child">child</div>
</div>
.fixed {
background: red;
position: fixed;
right: 0;
}
.parent {
position: relative;
width: 100px;
height: 100px;
background: blue;
}
.child {
background:black;
position: absolute;
right: 0;
color:yellow;
}
absolute에게도 parent가 생겼다. 이름을 fixed로 개명하고 새로운 삶을 꿈꾸었으나 삶의 관성은 쉽게 잊도록 만들어지지 않았음을 그는 몰랐다.
position이 있는 parent가 생겼음에도 여전히 오른쪽 벽에 붙어있다. 주어진 관습을 따르지 않고 자신의 길을 가는 position: fixed
는 이 시대 마지막 아나키스트라 불릴만하다.
재미있게 읽었습니다 ㅋㅋ
좋은 글 감사해요~ :)