CSS/예제
CSS position에서 relative와 absolute의 차이
Socratone
2020. 6. 9. 23:42
.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