배치 position (1) - static

css의 position에는 4가지의 요소가 있다. (sticy 다른 개념으로 이해되기 때문에 제외)

각각의 4가지 요소에는 속성으로 top, bottom, left, right, z-index를 사용할 수 있고
음수를 사용하여 요소의 각 방향별 거리를 지정할 수 있다!

그러면 이제 각각의 속성에 대해서 알아보겠다.

---

1. static

static 은 기준이 없는 상태이다.
그렇기 때문에 작성했을 때 기본으로 지정되는 기본값으로 생각하면 된다.
그러면 이 배치 요소는 사용하지 않는 걸까?

아니다!
자식 요소가 부모 요소가 아닌 부모의 부모(조상 요소)를 기준으로 잡을 때는 사용하게 된다.

위 그림은 자식 요소 1,2,3과 그리고 부모 요소, 조상 요소가 보인다.
만약 자식 2 가 부모의 조상 요소를 기준으로 배치하고 싶다면 어떻게 해야 할까?

.view{
    background-color: royalblue;
    position: relative;
    width: 500px;
    height: 300px;
}
.container{
    background-color: tomato;
    position: static;
    width: 250px;
    height: 200px;
}
.container .item{
    background-color: yellow;
    border: 4px dashed blue;
}
.container .item:nth-child(1){
    width: 100px;
    height: 100px;
}
.container .item:nth-child(2){
    width: 140px;
    height: 70px;
    position: absolute;
    bottom: 30px;
    right:30px;
}
.container .item:nth-child(3){
    width: 70px;
    height: 120px;
}

부모의 요소에 position을 static을 적용시켰다.
자식 2 요소는 자신의 부모 요소에는 기준이 없다고 인식하여 부모의 부모 (조상 요소)에 기준을 잡는다.
그러면 자식 2 요소는 설정해둔 위치 값으로 이동하여 배치하게 된다.

다음 시간에는 다른 배치 요소에 대해서 알아보겠다!
⸜( ◜࿁◝ )⸝︎︎