TIL: position 속성

CSS에서 position은 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

시도해보기

position - CSS: Cascading Style Sheets | MDN

 

 

static

태그에 아무런 값도 주지 않아도 주어지는 기본값. 요소를 일반적인 문서의 흐름에 따라 배치한다. top, right, bottom, left,  z-index가 아무런 영향도 미치지 않는다

<style type="text/css">

        div{
               border:5px solid tomato;
               margin:10px;
        }       

</style>

<div id="other">other</div>

<div id="parent">
        parent
        <div id="me">me</div>
</div>

position 값을 아무것도 할당하지 않았다. 각 element들은 position: static; 을 기본 값으로 갖고있음.

#me{

        left:100px;

        top: 100px;

}

이렇게 offset을 적용해도 기본값인 static을 갖고있기 때문에 움직이지 않는다. 태그 div id="me"의 position을 바꾸어 주어야함.

offset : 상대주소, 즉 기준이 되는 주소로부터 얼마나 떨어져 있는지를 나타내는 값이다.

예시
1) "abcdef"라는 문자열이 있다고 하면 d는 a로부터 얼마나 떨어져있나? (답:3)
   즉, d문자는 a시작점에서 3의 오프셋을 가진다.
따라서, Offset은 주로 두번째 주소를 만들기 위해 기준이 되는 주소에 더해진 값을 의미한다.
2) 과학시간에 저울로 소금의 무게를 잴때 비커의 무게를 제외하기 위해 저울에 설정해두는 값도 offset이라고 한다. 
예를 들어 비커의 무게가 400g, 소금의 무게가 10g일 때 400g을 설정해두고 무게를 재서 10g인걸 아는 것 처럼.

 

relative

#me{
        position: relative;
        left:100px;
        top: 100px;
}

요소를 일반적 문서의 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용해 이동.

오프셋은 다른 요소에는 영향을 주지 않는다.  다른 컨텐트는 이 요소에 의해 생긴 빈 공간(원래 있어야 하는 자리)에 위치할 수 없다. 

absolute 

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 가장 가까운 부모요소에 대해 상대적으로 배치함. 만약 부모요소중 위치 지정 요소가 없으면 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, left 값이 지정한다.

<style type="text/css">

#parent, #other{
         border:5px solid tomato;
}

#me{
         background-color: black;
         color:white;
}
</style>

<div id="other">other</div>
<div id="parent">
        parent
        <div id="me">me</div>
</div>

positon: absolute를 적용하지 않은 원래 상태이다.

이상태에서 <div id = "me">에 offset을 준다면?

 

#me{
        background-color: black;
        color:white;
        position: absolute;
        left:0px;
        top:0px;
}

left, top의 offset값이 0, position이 static이 아니므로 offset이 적용됨.

그런데 그 위치는 문서의 시작 위치이다. 그 이유는 <div id="other"> , <div id="parent"> 의 position이 static이기 때문에 <div id="me">의 시작위치를 가장 최상위인 문서의 시작점으로 이동시킨 것.

fixed

화면에 보이는 위치가 기준이라고 생각하면 된다. 한번 위치가 결정되면 화면에서 스크롤이 생긴다해도 사라지지 않고 처음 화면에 출력되었던 그자리에 고정적으로 위치한다. 그래서 속성 이름이 fixed. 보통 웹페이지 상단 고정된 네비게이션 바로 꾸미는 것이 가능함.

이 속성의 경우 relative처럼 top, right, bottom, left 속성으로 위치값을 지정해줄 수 있지만, relatvie 속성과는 달리 원래 있어야 할 위치, 즉 static일 경우에 위치할 곳에 빈공간을 만들지 않는다.

여기서 빈공간을 만든다는 것은 다른 엘리먼트가 그 자리에 위치 할 수 없도록 한다는 말과 같다. 

 

Sticky

비교적 최근에 추가된 포지셔닝 메커니즘. 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 fixed position 과 유사하게 동작한다.

position 속성을 sticky로 설정되어있는 엘리먼트는 마치 position 속성이 static으로 설정되어 있는 것처럼 부모 엘리먼트 내부에서 공간을 차지합니다.하지만 스크롤할 때는 마치 position속성이 fixed로 설정되어 있는 것처럼 다른 엘리먼트들이 상하좌우로 움직일 때 지정된 자리에서 움직이지 않음. 

header {
  position: sticky;
  top: 0;
  
  background: deeppink;
  color: white;
  padding-left: 32px; 
  padding-right: 32px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 

References

https://keichee.tistory.com/277

[CSS] 포지션(position) 속성 강좌

https://victorydntmd.tistory.com/185

[CSS] 포지션( Position ) 개념

https://www.daleseo.com/css-position-sticky-header/

[CSS] 스티키 헤더 (sticky header)