[CSS] Position: Absolute

안녕하세요 동기 여러분! 오늘은 포지션의 프로퍼티의 값인 엡솔루트(보드카)에 대해 알아보도록 합시다!

 

Position: Absolute

HTML의 요소 위치를 지정하는 방법이 다섯 가지가 있는데 그중 한 가지가 Absolute이다.

 

---

 

Absolute

absolute를 영어사전에서 찾아보면 형용사로는 '완전한, 완벽한' 명사로는 '절대적인 것'이라는 뜻이 있다.

그렇다. position: absolute는 절대적인 파워로 요소를 움직이는 것이다.

 

아래의 코드와 실행화면을 보자.

<!-- HTML -->
<div id="stranger">난 모르는 사람</div>
<div id="parent">난 부모
  <div id="child">난 자식</div>
</div>

/* CSS */
div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#child {
  position: absolute;
}

포지션의 값을 엡솔루트로 설정하고 실행해 보겠다.

 

'난 자식'이 부모요소를 빠져나왔다.

 

그렇다면 top과 left 프로퍼티를 사용해 설정하면 어떻게 될까?

position: relative와 top: 0px, left: 0px일 경우

div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#child {
  position: relative;
  top: 0px;
  left: 0px;
}

• 역시 relative는 상대적인 위치(현재위치)를 기준점으로 잡기 때문에 변화가 없다. 

 

position: absolute와 top: 0px, left: 0px일 경우

div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#child {
  position: absolute;
  top: 0px;
  left: 0px;
}

• absolute는 절대적이기 때문에 다른 요소가 있던지 말던지 좌표를 따라 위치를 이동한다. 그래서 기준점이 (0, 0)이라고 말할 수 있겠다. -> (0, 0)을 기준으로 돌아다니기 때문

 

---

그럼 한번 이리저리 옮겨 보자.

top: 50px, left: 50px

 

top: 100px, left: 100px

 

---

 

오늘의 느낌

요즘 캐나다 날씨가 갑자기 추웠다가 좀 따뜻했다가 상당히 이상하다. 다들 감기와 코로나 조심하세요!!!