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

 

position속성에 대해 알아보자.

 

 

- position은 요소를 배치할때는 어떠한 기준을 말한다.

  position은 요소의 위치를 직접적으로 배치해주는것이 아니고, 

  배치를 위해 기준을 작성해주는 속성이다. (기준->위치설정)

 

 

 

 

그 기준에는 기본값으로 static이있다.

스테틱은  기본적으로 배치를 할 수 없는 상태를 말한다.

 

그럼 배치를 할 수 있는 속성들에는

1. relative 

- 요소 자신을 기준

 

2. absolute

- 위치 상 부모 요소를 기준

 

3. fixed

-뷰 포트(브라우저)를 기준

 

position 값을 사용하여 기준이 마련되면

실제로 위치를 설정해줘야하는데 

그때 사용하는 속성은

top

bottom

left

right

z-index가 있다.

 

기본값은 auto이고

top: {
 10px;
}

이런식으로 px, em, rem등 단위를 입력해주면 된다.

 

 

 

relative란?

 

 

 item을 추가하고 css속성을 입력해보았다.

 

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

.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;
}

 

세 개의 오렌지 박스를 만들었다. 

그럼 2번 박스에 relative 속성을 넣어보자.

 

 

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

 

 

아무런 변화도 없다.

relative만 사용했을땐 변화가 없고, 

top, bottom, left, right 속성을 지정해줘야만 화면에 변화가 일어난다.

 

 

.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: relative;
  top: 30px;
  left: 200px;
}

 

 

위의 설명에서 relative의 위치값은 자기 자신이 기준이라고 말했다.

자기 자신 기준으로 위에서 30px이동, 

왼쪽에서 200px이동하는걸 볼 수 있다.

그러나 이런 relative로 어떤 배치를 할땐

거의 사용하지않는다고 한다.

 

이유는? 2번 박스가 relative속성으로 위 왼쪽으로

이동하면서 여백(원래 2번박스가 있었던 자리)이 생겨버리는데

우리 눈에는 보이지않지만 그 안에 요소가 있는 개념이고,

현재 우리 눈에 보이는 2번박스는 '허상'이라 생각하면 쉽다.

배치의 개념과는 relative는 어울리지않기 때문이다.

 

 

 

이번엔 absolute에 대해서 알아보자.

 

 

일반적으로 배치라는 개념에서 가장 많이 사용되는 포지션으로

absolute를 사용하면 공중에 붕~ 뜨게되면서 요소가 겹치게 된다.

코드를 보며 알아보자.

 

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

 

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

3번 박스가 가려지는 것을 볼 수 있다.

(앱솔루트는 눈엔 보이지않지만 떠있어서! )

2번 박스는 더 이상 1번과 3번 박스와 상호작용을

하지않는 상태가 되는 것이다.

 

 

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

 

 

이번엔 위치값으로 아래에서 30px 오른쪽으로 60px

움직이게 만들어보자.

 

 

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

여기서 이상한점은..... absolute는 부모 요소 기준이라고 말했는데 

왜? 부모 요소인 파란색박스안에 들어가지않고, 

바닥에 있을까?

 

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

구조상의 부모 요소가 아니고, 위치상의 부모 요소에

position속성을 넣지않았기때문이다.

컴퓨터는 포지션값이 없다는 판단을하고

.container를 위치상으로 잡지를 못하니까 

그 위로 계속 올라가다가 위치상 부모 요소를

찾지못하고 뷰포트를 기준으로 배치시키는 것이다.

 

 

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

 

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

 

 

 

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

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

 

포지션의 absolute와 fixed같은 경우는 기준이

부모요소나 뷰포트이기때문에 레이아웃 구조가 

무너져버리게 된다. 

구조상 부모요소를 위치상 부모요소로 바꾸는것중,

가장 무난한 포지션이 relative이기때문이다.

 

 

 

이번엔 wrap이라는 상위요소를 하나 더 만들어보았다.

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

 

.wrap {
  width: 400px;
  height: 300px;
  background-color: gray;
  position: relative;
}

 

아까 .container에 주었던 포지션 값을 제거하고

이번엔 컨테이너의 상위요소인 .wrap에 포지션값을 넣어봤다.

 

아까와 다르게 회색 박스 부분에 2번 박스가 설정된 위치값이

붙는것을 볼 수 있다. (위치상 부모 요소에 포지션값이 있어서)

 

 

 

 

 

마지막으로 fixed는????

fixed는 처음부터 뷰포트를 기준으로 배치한다.

위에서 말했듯 absolute도  위치상 부모 요소를 못찾으면

뷰포트까지 올려서 사용하기도 하지만 

이런 방식으로는 웹사이트를 만들지 않는다. x

 

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

 

position속성을 fixed와 위치값을 넣고 화면을 출력하면?????

 

 

 

 

 

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

fixed는 상위요소에 포지션 값을 넣던 안 넣던

뷰포트가 기준이기때문에,

포지션값을 따로 부모요소에 넣어주지않아도 된다.