[CSS3]Position

🤔Position이란?

요소를 원하는 위치에 자유롭게 이동하기 위해서 사용하는 property이다.

Position에는 5가지의 종류가 존재한다. 

1. static

2. relative

3. absolute

4. fixed

5. sticky

(sticky는 지원하는 브라우저가 많지 않기 때문에 내용을 스킵하겠다.)

 

✨position공부 시 중요 포인트

❗ 1. 내가 어떤 종류의 position을 사용하고 있는지 

❗ 2. 내가 사용하는 position은 무엇을 기준으로 사용하는지

기준점이 각각의 포지션 type에 따라 많이 달라진다.

---

💡 Type 1. static

static은 모든 요소의 기본 position값이다.

모든 요소의 포지션은 모두 static으로 설정되어있다.

우리가 생각하는 일반적인 요소의 상태는 static이다.

💡 Type 2. relative

relative 이동의 기준점은 자기 자신이 본래 있던 자리이다.(본래 있던 자리에서 위, 아래, 좌, 우로 움직일 수 있다.) 

우리가 어떤 요소에 relative값을 부여하면, float때와 마찬가지로 부모 요소를 떠나 요소가 붕뜨게된다.

하지만 float와 다르게 layout이 붕괴되거나, 다른 주변 요소에 영향을 끼치지 않는다.

그 이유는 relative는 float와 동일하게 부모로부터 붕뜨게 되지만 본래의 자기 위치는 기억을 하고 있기 때문이다.

또한 부모, 형제 요소들도 relative요소의 위치를 인지하고 있기 때문에 layout붕괴가 일어나지 않게 되는 것이다!

💡 Type 3. absolute

absolute도 float와 동일하게 부모 요소로부터 붕뜨게 되면서 display값이 block으로 설정된다.

absolute는 float와 매우 비슷한 모습을 보여준다.

부모의 요소로부터 붕뜨기되며 block이지만 길막을 하지 못하는 block이 된다.

 

하지만 비슷한 이 둘에게도 다른 한 가지가 있다. 

바로 inline contents가 다르다는 점이다.

float 같은 경우는 inline contents가 float 된 요소의 존재를 알아 요소를 피해 다녔지만.(하단)

Inline 컨텐츠에 float적용시 layout 모습, layout이 붕괴 되어 버렸다...

absolute는 혼자 부어서 contents에 관여하지 않는 모습을 보여준다.(하단)

Inline 컨텐츠에 absolute 적용시 layout 모습

그럼 이제 absolute가 무엇을 기준점으로 삼아 위치를 움직이는지 알아보겠다.

absolute는 특이하게 자신이 기준으로 삼고 싶은 기준점을 새로 정할 수 있다.

float는 부모 요소로부터 종속되어 있었지만,

absolute 같은 경우엔 자신을 감싸고 있는 조상 요소들 중 하나를 선택해 기준으로 잡을 수 있다.

선택의 기준(조건)은 position이 static이 아닌 요소일 경우 그 요소를 기준으로 본인을 위치시킨다.

(조상 요소는 대부분 주변 요소에 영향을 끼치지 않는 relative가 사용된다.)

.grandparent{
  width: 800px;
  background-color: darkgrey;
  position: relative;
  margin: 0;
  height:600px ;
}

.red {
  background-color: #ff4949;
  position: absolute;
  bottom: 20px;
  right:20px;
}

.yellow {
  background-color: #ffc82c;
}

.blue {
  background-color: #0066ff;
}

조상의 요소 안에서 빨간색 요소가 아래로 20px 오른쪽으로 20px 움직인 것을 볼 수 있다. 

💡Type 4. fixed

absolute와 fixed는 동일한 현상을 가지고 있다.

display가 block, 길막 할 수 없는 block, 집 나간 자식이 된다는 것 등 동일한 현상을 가지고 있지만

둘의 가장 큰 다른 점은 바로 기준점이다.

fixed는 명확하게 본인의 기준점이 존재하는데,

바로 viewport(브라우저 창의 전체 크기) 사이즈를 기준으로 자신을 위치시킨다.

(핸드폰 기종마다 서로 다른 viewport를 가지고 있다. 갤럭시, 아이폰 화면 사이즈의 차이점 등)

.grandparent{
  width: 800px;
  background-color: darkgrey;
  position: relative;
  margin: 0;
  height:600px ;
}

.red {
  background-color: #ff4949;
  position: fixed;
  bottom: 0px;
  right:0px;
}

.yellow {
  background-color: #ffc82c;
}

.blue {
  background-color: #0066ff;
}

viewport에서 빨간색 요소가 바닥에 밀착한(0px) 오른쪽 밀착한(0px) 모습을 볼 수 있다. 

❗❗ z-index ❗❗

position 된 요소들의 수직방향으로 써의 level 위치를 알려준다.

position은 static을 제외한 조건들을 사용하게 되면 모두 요소를 붕 띄우게 된다.

이때 수직방향으로 붕뜨며 z-index라는 level이 생긴다.

요소 간의 위치가 생기기 때문에 이를 통해 css를 조절해 사용할 수 있다.