[CSS]POSITION 정리

div{
  width:50px;
  height: 50px;
  margin-bottom: 20px;
  background: red;
}

.container {
  background: yellow;
  left: 20px;
  top: 20px;
  position: relative;
}

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: sticky;
}

 

relative의경우 원래 박스 위치 상단 왼쪽을 기준으로 움직인다.

absolute의 경우는 가장 가까이 존재하는 박스내에서의 상단왼쪽을기준으로 움직인다.

fixed는 웹페이즤 왼쪽상단을 기준으로 옮기는것을가능하게 해준다.

sticky는 원래 자리에 있지만 스크롤시에도 그자리에 유지하는것이다.

 

이러한 css 자체 기능들을 사용할때는 각각의 인터넷에서 다 사용가능한지 체크가 필요하다,

체크 하기 위해서는  이용하는 사이트가 있따.

 

 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc