Html css Position (relative, fixed, absolute, sticky)

 

 

1. static : 지금 위치에 그대로 위치 시킨다. (기본적인 값)

div {
  position: static;
}

2. relative : 관계의 형태, 다른 테그의 posotion 속성에 영향을 받는다.

div {
  position: relative;
  left: 30px;
}

3, fixed : 위치를 고정시킨다.  (지정한 위치에서 안움직인다)

div{
  position: fixed;
  bottom: 0;
  right: 0;
}

4. absolute : 절대위치, 지정한 위치에 표시한다. 만약 relative한 영역이 존재하면 해당 영역 안에서만 움직인다.

div{
  position: absolute;
  top: 80px;
  right: 0;
}

5. sticky : relative처럼 동작하면서 위치가 fixed한 효과를 나타낸다.

div{
  position: sticky;
  top: 0;
}

6. z-Index : 테그의 순서를 나타낸다. 위치가 지정된(예: absolute position인경우) 경우에서 순서를 의미한다.

#div1 {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}

#div2 {  /**해당 테그가 div1보다도 위에 위치한다.**/
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
}