CSS position에서 relative와 absolute의 차이

.parent {

    top: 50px;

    left: 50px;

    position: relative;

    background-color: plum;

}

 

.second {

    top: 50px;

    left: 50px;

    position: relative; 

    background-color: bisque;

}

 

자식의 position이 relative인 경우 공간을 차지하지만

 

.parent {

    top: 50px;

    left: 50px;

    position: relative;

    background-color: plum;

}

 

.second {

    top: 50px;

    left: 50px;

    position: absolute; 

    background-color: bisque;

}

 

absolute인 경우 공간을 차지하지 않는다.

 

absolute의 부모 중 relative가 있다면

absolute 자식은 relative의 위치를 따라가고

없다면 전체 화면을 따라간다.

박스 중간에 떠 있는 박스를 만들고 싶을 때 absolute를 기억하자.

 

참고 : https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1