CSS의 포지션 속성

0. 오늘의 배울 것.

positon은 display에서 벗어난 새로운 위치!!

기본적으로 모든 태그는 display 속성을 가지고 있다. 이 display 속성을 통해, 요소들이 한 파일 내에서 어떻게 배치될지 정해지는 것이다.

그런데 내가 기본적인 display 흐름 말고, 다른 식으로 배치하고 싶다면 어떻게 할까? 예쁜 사이트에서 보이는 navigation bar 처럼 브라우저 위에 딱 붙어있거나, 어떤 요소 위에 둥둥 떠있게 하거나 등, 다양한 배치를 하고 싶다면 어떻게 해야 할까.

이렇게 기본적인 display 흐름에서 벗어난 곳에 배치하기 위해, position이라는 속성을 사용한다.

이번 시간에는 position 속성의 속성 값에는 무엇이 있는지, 그리고 어떤 효과가 있는지를 알아보자.

1. position 속성에 들어갈 수 있는 속성값들.

앞서 배운 display는 한 영역 내에서 요소들의 전체적인 배치를 정하는 것이다. block, inline, inline-block이 있고, block은 위에서 아래, inline과 inline-block은 좌에서 우로 태그가 배치되게 흐름을 정한다.

이이 흐름에서 벗어나 내가 원하는 곳에 요소를 배치하려면 position 속성을 넣어야 한다.

사실 모든 태그는 기본적으로 position 속성을 가지고 있는데, 우리가 아무 값도 넣지 않을 경우 디폴트 값은 static 이다. static 은 해당 태그가 원래 있어야 할 위치에 있게 한다. 그 외에 relative, absolute, fixed, sticky 속성값이 있어 이 값으로 위치를 바꿀 수 있다.

그리고 이렇게 position 속성을 주어 위치의 기준을 정하고, top, right, bottom, left 속성을 부여해서 구체적인 위치를 수정하면 된다!!

2. relative 포지션

태그가 원래 있어야 할 곳을 기준으로, top, bottom, left, right 속성을 통해 위치를 조정한다. 예를 들어 '위에서 30px 밑으로 떨어진 곳에 다시 요소를 배치' 하기 위해 해당 태그를 position: relative; top: 30px; 으로 지정한다. 이 때 요소는 원래 자리 그대로에 있던 걸로 취급된다!! 이게 무슨 말이냐면, 요소가 원래 위치를 벗어난다 해도 다른 요소들이 그 자리를 차지하는 게 아니라는 것이다.

// 작성법.
.div{
    position: relative;
    top: 30px;
}

3. absolute 포지션

absolute 포지션은, 포지셔닝이 된 가장 가까운 조상 태그를 기준으로 위치를 정한다.
이 때 absoluted된 요소는 없는 취급이 돼서 원래 그 자리엔 다른 요소가 차지한다. 아까 본 relative 요소는 기존 위치가 그대로 남아있던 반면 absoluted는 공중에 떠있듯이 원래 요소의 위치가 무시된다.

• 포지셔닝이 됐다는 것은, 조상의 position 값이 static이 아니란 거다!!! 즉, 포지셔닝 된 조상이 없다면 absolute 포지션은 작동되지 않는다.

따라서 아래 코드에서 div4는 적용되지 않는다.

<div class="div1">
    <div class="div2"></div>
</div>
<div class="div3">
    <div class="div4"></div>
</div>

.div1{position: relative;}
.div2{position: absolute; top: 30px;}
.div4{position: absolute;}

조상 div1의 위치 내에서 top으로부터 30px 떨어진 곳에 div2를 둔다.

• absolute 포지션을 가지는 요소는 기본적으로 inline-block처럼 안에 있는 내용만큼의 크기를 가지고, 따로 width, height를 설정해야 한다.
• 그래서 이렇게 아래 코드처럼 적으면 absoluted 요소가 부모 내 모든 영역을 차지하게 된다.
• .div2{ position: absolute; top:0; right:0; bottom: 0; left: 0; }

top, bottom, left, right 속성을 단번에 주는 속성이 inset이다. inset: 0; 은 top, bottom, left, right 값이 0이란 뜻이다. 즉, 부모 내 모든 영역을 차지한다!

.div2{  
position: absolute;  
inset: 0;  
}

정리하자면 absolute 포지션을 사용할 때 주의할 것은

1. 조상 중에 static이 아닌 position 값을 갖는 요소가 있는지
2. absolute 포지션 요소의 height와 width를 적절히 정해주었는지
3. top, bottom, right, left 속성을 통해 위치를 구체적으로 정해주었는지
   이것을 신경쓰자.

4. fixed 포지션

fixed된 요소는 브라우저 화면을 기준으로 위치가 정해진다. 즉, 우리가 스크롤을 해도 화면 기준으로 고정된 위치에 계속 둥둥 떠다니게 된다!!

fixed도 원래 있던 자리는 다른 요소가 침범하며 없는 취급을 해버린다. 따라서 fixed 요소가 다른 요소를 가리지 않게 공백을 계산해서 줘야 한다!! nav bar 같은 걸 만들려면, section이 nav bar에 가려지지 않게 위치를 잘 조정해주어야 한다!

• fixed 요소는 기본적으로 inline-block처럼 안에 있는 내용만큼의 크기를 가지고, 따로 width, height를 설정해야 한다.

  .div{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* 혹은 right: 0; */
  }

5. sticky 포지션

sticky는 기본적으로 static처럼 배치되어 원래 기존의 위치를차지한다. 그러다 스크롤해서 웹 상단에 닿으면 fixed처럼 요소도 같이 붙어온다.

그래서 fixed처럼 여백을 따로 계산할 필요가 없다.

sticky에서 top, left.. 속성은 스크롤을 했을 때 브라우저 화면의 어느 위치에서 요소가 달라붙게 할 것이냐를 지정하는 것이다.

top: 0 이라면 스크롤하다가 sticky 요소가 브라우저 화면 맨 위에서부터 0px 떨어진 곳에 닿으면 달라붙는다는 것이다.

sticky는 부모 요소 안에서만 움직이므로, 화면이 부모 바깥으로 나가면 sticky도 사라진다.

.div{
    position: sticky;
    top: 0;
}

6. z-index

가끔 요소들을 움직이다가, 특정 요소가 너무 앞으로 나오는 바람에 원하는 디자인이 안 나올 수도 있다. 이럴 때 z-index 값을 주어 앞 뒤의 순서를 정하자!! z-index란 파일에서 어느 요소를 앞으로 보일지 정해주는 속성이다.

z-index가 없다면 기본적으로 파일에서 아래에 작성된 코드가 앞쪽에 보인다.

<!-- a, b가 겹쳐지면 코드 상 나중에 있는 b가 앞으로 보인다.  -->
<div class ="a"></div>
<div class ="b"></div>

css에서 z-index 값을 a에 더 크게 주면 a가 더 앞으로 나와보인다.

z-index 는 기본적으로 디폴트 0값이다. z-index 값이 같다면 역시 코드 상 나중에 나오는 요소가 보인다.

z-index는 마이너스 값도 넣을 수 있다!!

.a{
    z-index: 1;
}

쌓임맥락 때문에 z-index가 내 맘대로 배치되지 않을 때도 있다. 그럴 땐 그냥 요소를 부모 바깥으로 꺼내는 게 가장 쉬운 해결방법.