<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
'CSS > 예제' 카테고리의 다른 글
CSS position에서 relative와 absolute의 차이 (0) | 2020.06.09 |
---|---|
아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법 (2) | 2020.06.09 |
엘리먼트를 배경처럼 활용하는 CSS 예제 (0) | 2020.03.14 |
CSS 스마트폰 그라데이션 상단바 예제 (0) | 2020.03.13 |
CSS 모던한 그리드 레이아웃 예제 (0) | 2020.03.13 |