[CSS] Position: Fixed

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 픽스드에 대해 알아봅시다!

 

Position: Fixed

Fixed는 영어사전에 찾아보면 '고정된'이라는 뜻을 가지고 있다.

 

그렇다 이 녀석은 요소를 내가 정한 위치에 고정시켜 주는 녀석이다.

  -> 이 말은 웹 페이지가 커지든 작아지든 스크롤을 내리든 올리든 상관없이 요소가 정해진 자리에 고정된다는 소리

 

---

 

진짜 고정이 되는지 해봅시다.

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

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

#parent {
  height: 5000px;          /* <- 스크롤을 만들기 위해 넣어줌 */
  background-color: paleturquoise;
}

#child {
  position: fixed;
}

스크롤이 만들어 졌습니다.

 

이제 스크롤을 내려보겠습니다.

대박 계속 그자리에 고정되는군요?

 

---

 

fixed의 위치를 설정해보겠습니다.

top: 0px, left: 0px일 경우

absolute처럼 기준점이 (0, 0)이다 = relative와 달리 기준점이 현재 위치가 아니다

 

top: 100px, left: 100px일 경우

(100, 100)씩 밀려나서 위치가 선정되어 고정됨

 

---

 

오늘의 느낌

요즘 유튜브에서 꼬꼬무(꼬리에 꼬리를 무는 그날 이야기)를 보는데 뉴스와 교과서에서 본 큰 사건들의 자세한 내막을 알려주니 너무 느끼는 점도 많고 가슴 아픈 일도 많아서 마음이 찡하다... 

 

역사에 갖혀서 살아도 안 되겠지만 역사를 잊어도 절대 안 될 것이다.