position

김동하·2020년 9월 8일
0

CSS

목록 보기
4/11

position을 조지려고 한다. css는 개월 수로 따지면 2개월은 한 거 같은데 제대로 정리를 안 해서 그런지 할 때마다 헷갈린다.

position

모든 태그는 기본적으로 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 는 이 시대 마지막 아나키스트라 불릴만하다.

출처 : https://www.zerocho.com/

profile
프론트엔드 개발

1개의 댓글

comment-user-thumbnail
2021년 8월 31일

재미있게 읽었습니다 ㅋㅋ
좋은 글 감사해요~ :)

답글 달기