CSS - 17. Position - fixed

1. Position - fixed

css는 정답이 없지만, 어느 브라우저(크롬, ie, safari)에서 봐도, 어느 디바이스(아이폰, 안드로이드, 탭)에서 봐도, 어느 크기에서 봐도 화면이 이상하게 겹치거나 깨지지 않고 잘 나오도록 신경 써야 하는 것이 바로 css이다.

 

이제 마지막 position인 fixed를 보겠다.

.coupon {
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: red;
  color: white;
  font-size: 20px;
}

fixed는 말 그대로 고정됐다는 뜻이다. absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없다. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다. right: 0;은 브라우저의 오른쪽에서 0 떨어져 있다는 뜻이라 브라우저 우측에 바짝 붙어있다. bottom: 0;도 하단에서 0 떨어져 있다는 뜻이고 브라우저 하단에 붙어있다.