박스(div)의 내용과 겹치는 박스를 만드는 방법

<div class="parent">
    <div>1111</div>
    <div class="child">2222</div>
    <div>3333</div>
</div>

 

.parent {
    background-color: plum;
    position: relative;
}

.child {
    background-color: pink;
    position: absolute;
    top: 10px;
    left: 10px;
}

 

 

relative 안에 absolute를 설정하면

relative인 부모를 따라서 자식이 움직이고

box로 공간을 차지 하지 않는다.

absolute 속성을 빼면 다음과 같이 변한다.

 

 

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