[CSS] position

position

 

relative, absolute

<div>
  <span>123</span>
</div>

 

div {
  position: relative;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
}

div span {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: yellow;
}

absolute는 기준점이 body가 아니라 자기자신(span)이 속해있는 부모(div).

span이 가지고 있는 위치는 그 부모인 div가 기준이 됨.

 

 

fixed

body {
  height: 1000px;
}

div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 32px;
  background-color: red;
}

div span {
  position: absolute;
  top: 5px;
  left: 10px;
  background-color: yellow;
}

GNB와 같이 스크롤을 해도 따라다니는 스타일을 만들 때 사용.

 

 

 

sticky

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto repellat et aliquam, sed 
consequatur incidunt sapiente ad maiores enim illo culpa eum quo atque aperiam! Exercitationem 
adipisci est consectetur voluptatum.</p>

<div>
  <span>123</span>
</div>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto repellat et aliquam, sed 
consequatur incidunt sapiente ad maiores enim illo culpa eum quo atque aperiam! Exercitationem 
adipisci est consectetur voluptatum.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto repellat et aliquam, sed 
consequatur incidunt sapiente ad maiores enim illo culpa eum quo atque aperiam! Exercitationem 
adipisci est consectetur voluptatum.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto repellat et aliquam, sed 
consequatur incidunt sapiente ad maiores enim illo culpa eum quo atque aperiam! Exercitationem 
adipisci est consectetur voluptatum.</p>

 

body {
  height: 1000px;
}

div {
  position: sticky;
  top: 10px;
  width: 100%;
  height: 32px;
  background-color: red;
}

div span {
  position: absolute;
  top: 5px;
  left: 10px;
  background-color: yellow;
}

IE에서 지원 안됨. 대부분의 모바일에서 지원돼서 많이 사용하고 있음.

그 위치에 있다가, 특정 시점에서 상단에 고정되게 하는 것.