CSS : Positioning : static, relative, absolute, fixed

static

일단 모든 태그들은 처음에 position: static 상태입니다.

(기본적으로 static이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

static에 설정 값을 주어도 적용이 따로 되지 않습니다.

<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1</div>

span, div {
  background: yellow;
  border: 1px solid red;
}

static

 

relative

여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다.

이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동합니다.

<span class="top">top</span>
<span class="right">right</span>
<span class="bottom">bottom</span>
<div class="left">left</div>

span, div {
  background: yellow;
  border: 1px solid red;
}

.top {
  position: relative;
  top: 5px;
  z-index: 1;
}

.right {
  position: relative;
  right: 5px;
}

.bottom {
  position: relative;
  bottom: 5px;
}

.left {
  position: relative;
  left: 5px;
}

relative

#top 태그에 top: 5px를 줬는데 왜 아래로 이동했을 까요?

바로 relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동합니다.

바깥쪽으로 이동하게 하고 싶으면 5px 대신 음수 -5px를 주면 됩니다.

 

또한 주목할 것은 #top이 #left보다 위에 있다는 겁니다.

보통 태그는 같은 position이면 나중에 나온 태그가 더 위에 배치됩니다.

하지만 z-index라는 속성을 #top 태그에 더 높게 주었기 때문에 #left태그보다 위로 올라갔습니다.

z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성입니다. 기본값은 0이고, #top에 1을 주었기 때문에 다른 태그들보다 높게 위치합니다.

 

 

absolute

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다.

만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

 

<div>
  <div id="absolute">absolute</div>
</div>
<div id="parent">
  <div id="child">children</div>
</div>

#absolute {
  background: yellow;
  position: absolute;
  right: 0;
}

#parent {
  position: relative;
  width: 100px;
  height: 100px;
  background: skyblue;
}

#child {
  position: absolute;
  right: 0;
}

absolute

위의 예시를 보면, #absolute는 조상 태그 중 postion: relative인 것이 없기 때문에 body를 기준으로 가장 오른쪽으로 달라붙었습니다.

반면 #child는 조상 태그인 #parent가 position: relative이기 때문에 그것을 기준으로 가장 오른쪽으로 달라붙었습니다. 

 

참고로 absolute가 되면 div여도 더는 width: 100%가 아닙니다.

 

 

fixed

스크롤을 내려도 그 자리에 계속 있는 부분. 바로 포지션이 fixed로 설정되어 있기 때문입니다.

<div>
  <div id="fixed">fixed</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

#fixed {
  background: yellow;
  position: fixed;
  right: 0;
}

 

fixed도 absolute처럼 더는 div가 width:100%가 아닙니다.

 

https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1

(CSS) CSS 포지션(position) - static, relative, absolute, fixed

 

결론 :

1. default는 static 이지만, 동적으로 바꾸고 싶다면, relative라고 선언해주어야 한다.

즉 relative는 독립적으로 하나하나 쓸 수 있다. 하지만, 개별적으로 모두 하다보면, sync나 사이즈가 재각각이라서 문제가 있을 수도 있으니 이런 부분은 전체 body의 크기를 정해두고 rem으로 size를 정해주자.

 

2. absolute는 바로 위 태그, 부모의 상태에 따라 움직인다. 부모가 static이면, static에 따르고, relative하다면, relative한 부모 크기 내에서 움직인다. ex) 만약 내가 header를 선언한 후, header 안에 로고를 정확한 위치에 넣고 싶을 때, header를 relative로 선언한 후, logo 의 class를 선언 후, position을 absolute로 해준다.

 

3. fixed는 내가 스크롤을 하더라도 window내에 항상 존재하기 때문에, 고정적으로 필요한 기능을 넣을 때 유용할 듯 하다.