[CSS] Position 5가지 속성 값 정리 [3/16 Study]

 

[CSS] Position 속성

 

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

 

 

 

 

CSS position 속성

 

: CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.

position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.

상대 포지셔닝에서는 자기 자신의 위치를 기준으로 변했지만, 절대 포지셔닝에서는 자기 부모의 요소의 위치를 기준으로 변한다.

 

position: static

 

: position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다.

 position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 

이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, right, bottom, left 속성값은 position 속성이 static일 때는 무시됩니다.

 

 

position: relative

: position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다.

요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요.

요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.

 

HTML
 <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
 </div>

CSS
.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

 

 

 

position: absolute

: 이름과 같이 절대적인 위치에 둘 수 있습니다. 부모를 기준으로 이동합니다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모를 기준으로 절대적으로 움직이게 됩니다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하고 원하는 위치를 지정하면 됩니다.

 

CSS
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
}

 

2번 박스에 포지션 absolute를 사용했더니?

3번 박스가 가려지는 것을 볼 수 있다. (앱솔루트는 눈엔 보이지않지만 떠있어서! ) 

2번 박스는 더 이상 1번과 3번 박스와 상호작용을 하지않는 상태가 되는 것 입니다.

 

 

 

 

이번엔 위치값으로 아래에서 30px 오른쪽으로 60px 움직이게 만들어보자.

CSS
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  bottom: 30px;
  right: 60px;
}

 

당황스럽게도 2번 박스가 갑자기 밑으로 내려가는걸 볼 수 있다. 

여기서 이상한점은..... absolute는 부모 요소 기준이라고 말했는데 왜? 부모 요소인 파란색박스안에 들어가지않고, 바닥에 있을까?

바로, 위치상 부모 요소 라는것이 중요한 포인트다.

구조상의 부모 요소가 아니고, 위치상의 부모 요소에 position속성을 넣지않았기때문이다.

컴퓨터는 포지션값이 없다는 판단을하고 .container를 위치상으로 잡지를 못하니까 그 위로 계속 올라가다가 위치상 부모 요소를 찾지못하고 뷰포트를 기준으로 배치시키는 것이다.

 

 

부모요소인 컨테이너에 relative를 넣어주면?

 

css
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}

 

 

원했던대로 화면이 잘 출력되게 된다. 

그럼 여기서 꼭 relative를 넣어야하는이유가 있을까? 

포지션의 absolute와 fixed같은 경우는 기준이 부모요소나 뷰포트이기때문에 레이아웃 구조가 무너져버리게 된다. 

구조상 부모요소를 위치상 부모요소로 바꾸는것중, 가장 무난한 포지션이 relative이기때문이다.

 

 

position: fixed

 

: 말그대로 고정됐다는 뜻입니다. 뷰포트를 기준으로 배치합니다.

 

css
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: fixed;
  bottom: 30px;
  right: 60px;
}

 

바로 뷰포트 기준으로 내려가는것을 볼 수 있다.

fixed는 상위요소에 포지션 값을 넣던 안 넣던 뷰포트가 기준이기때문에, 포지션값을 따로 부모요소에 넣어주지않아도 된다.

 

 

position: sticky

 

: 스크롤 영역 기준으로 배치합니다. 원래 자리에서 최대한 유지 하고 있다가 부모 컨테이너안에서 스크롤링시 스크롤링 방향에 따라 지정된 포지션에서 유지 하도록 노력하는 속성입니다.

 

 

 

 

 

https://seo0yoon.tistory.com/41

[css] position 속성 (relative, absolute, fixed)

위 블로그를 참고해서 공부했습니다.

 

 

 

 

🔥마무리

CSS의 position 속성을 통해 HTML 요소를 다양한 방식으로 배치하는 방법에 대해서 살펴보았습니다. static이 기본 포지션 속성이고 absolute는 static이 아닌 다른 속성을 갖고 있는 부모를 기준으로 포지션을 설정하고 fixed는 화면상의 특정한 위치에 요소의 포지션을 고정시키고 sticky는 스크롤 영역을 기준으로 원래 자리에 최대한 유지하다가 스크롤링 방향에 따라 지정한 값 대로 포지션을 유지하는 속성이다까지 오늘 많은 내용을 배웠다.

확실히 CSS를 배우고 동적으로 요소들이 움직이니까 더 재밌고 다른 속성들도 빨리 배워보고싶다. 재밌다 ㅎ

오늘도 화이팅😊