[CSS]Position static, relative, absolute, fixed

Position

1. static

- position의 기본값, position값이 설정되어있지 않으면 자연스럽게 static으로 설정된다.

- 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓여간다.

- static이면, left와 top값 설정되어도도 위치가 변하지 않는다. 

.box1{
     width: 100px;
     height: 100px;
     background-color: yellow;
}
.box2{
      width: 100px;
      height: 100px;
      background-color:pink;
}

 

 

2. relative

- static으로 설정된 요소를 기준점으로 잡는다. (만약 static 요소가 없으면 브라우저 왼쪽 상단을 기준으로 잡는다.)

- left : 50px, top: 70px로 설정 시 static으로 설정된 요소를 기준으로 왼쪽으로 50, 위로 70 떨어진 곳에 위치하게 된다.

.box1{
      width: 100px;
      height: 100px;
      background-color: yellow;
}
.box2{
     width: 100px;
     height: 100px;
     background-color:pink;
     position: relative;
     left: 50px;
     top: 70px;
}

 

 

absolute

- 부모(부모가 없으면 브라우저 기준)의 왼쪽 상단을 기준점으로 잡는다.

- 부모가 없는 경우 ↓

.box1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: static;
}
.box2{
    width: 100px;
    height: 100px;
    background-color:pink;
    position: absolute;
    left: 50px;
    top: 70px;
}

- 부모가 있는 경우 ↓ (div class box안에 div class box2가 존재)

.box{
    left: 100px;
    top: 100px;
    height: 500px;
    position: relative;;
    width: 500px;
    background-color: black;
}

.box2{
    width: 100px;
    height: 100px;
    background-color:pink;
    position: absolute;
    left: 50px;
    top: 70px;
}

 

 

4. fixed

- 브라우저의 특정 위치에 고정시킬 때 사용한다.

- 스크롤을 내려도 지정된 위치에 고정되어 있다.

.box2{
    width: 100px;
    height: 100px;
    background-color:pink;
    position: fixed;
    left: 50px;
    top: 70px;
 }