반응형
position 에 따른 위치 변화
HTML페이지에서 CSS와 함께 페이지를 구성할 때 초보들이 가장 많이 어려워 하는 부분이 position 위치이다.
position 위치에 대해서 한번 살펴보자.
position에 따른 위치 변화에는 3가지 속성이 있다.
position:relative; /*상대적 위치*/
position:absolute; /*절대적 위치*/
position:fixed; /*고정위치*/
아래의 페이지를 예제를 통해서 구현해보자.
See the Pen Untitled by younwook choi (@wooknim) on CodePen.
위의 예제에 대한 설명이다.
.top과 .bottom이라는 2개의 박스가 있다.
그 안에 각각 .top_in, .bottom_in이 들어있다.
.top과 .bottom의 위치는 상대위치이기 때문에 .top의 위치는 위에서 0, 왼쪽에서도 0 이다. (top:0; left:0)
.top에 아래쪽 마진이 잡혀있으므로, .bottom은 .top바로 아래쪽에 있으므로 상대위치에서 위에서 0, 왼쪽에서 0 이다.(top:0; left:0)
.top_in 을 절대위치로 잡기 때문에 상위에 있는 위치에서 부터 절대값을 찾으면 된다.
.top_in의 상위박스는 .top이므로 .top에서 위쪽0, 왼쪽0 인것이다.
.bottom_in은 상대위치로 잡기 위해서 상위에 있는 박스인 .bottom에서 상대적으로 위쪽이 100px 떨어져있으므로 top:100px;값을 준 것이다.
※ 즉, 상대값이든 절대값이든 상위에 있는 div 태그의 위치값에 영향을 받게 되는 것이다.
