CSS 포지션 (1)_부모요소 자식요소

position 속성

: static, fixed, relative, absolute

 

그 중에서 이번에 다룰 내용은 아래의 두가지이다.

 

relative -> 부모요소에!

absolute -> 자식요소에!

 

예시

<div class="parent">
        <div class="child"></div>
</div>

 

.parent {
    background-color: blueviolet;
    width: 600px;
    height: 400px;
    position: relative;
}
.child {
    background-color: rgb(140, 132, 190);
    width: 200px;
    height: 100px;
    position: absolute;
}

position속성을 부모요소에 relative, 자식요소에 absolute로 지정해주었다.

 

이렇게만 해놓으면 아무 변화가 없다.

좌표를 지정해주어야 한다!

 

좌표값은 top, bottom, left, right으로 부여를 할 수 있고

각각 상하좌우의 가장 끝부분이 0이다.

또한, position속성과 함께하지 않으면 의미가 없다!

.parent {
    background-color: blueviolet;
    width: 600px;
    height: 400px;
    position: relative;
}
.child {
    background-color: rgb(140, 132, 190);
    width: 200px;
    height: 100px;
    position: absolute;
    /*↓ position과 함께 쓰지 않으면 의미 X*/
    right: 0;
    bottom: 0;
}

right 0, bottom 0으로 오른쪽 가장 아래로 위치하게 하였다.

---

이번에는 relative와 absolute를 각각의 요소에 넣어주는 이유를 한 번 알아보자!

 

부모요소에 적용했던 relative를 지워보면

이렇게 자식요소가 창의 가장 아래에 배치가 된다.

기존의 부모인 div가 아닌 body를 부모로 인지를 하는 것이다!

 

즉, relative와 absolute로 부모-자식 관계를 맺어 주어야 원하는 결과를 얻을 수 있다.