css 왕초보 탈출하기 04 - position (2/2) top,bottom,left,right
css 왕초보 탈출하기 04 - position (2/2) top,bottom,left,right
지난시간 정리:
position:absolute가 걸린 자식요소는 위치한다.
어디에?
해당 자식을 감싸고 있는 position:relative가 걸린 부모요소에 (바로 위에 가까운 직계 부모요소에 relative가 없다면, 그다음 감싸고 있는 부모요소, 그것도 없으면 그 다음 부모요소를 기준으로 위치한다. )
그렇다면 position:absolute가 걸린 속성에 top, bottom, left, right 속성을 부여하면 어떻게 될까?
.father{positon:relative;}
.child{position:absolute; top:20px;}
.child는 father를 기준으로 20px이동한다.
그런데 top 20px이 뭘까?????
bottom: 20px은?? right??뭘 기준으로 움직이는거야 도대체??
top:20px;
left:20px; 위의 코드를 해석해보자.
top:20px;
absolute요소를 감싸고 있는 relative요소를 기준으로.
top, 윗선, border-line. 으로부터 안쪽으로,
20px이동한다.는 뜻이다. 결론적으론 기존 위치한 자리로부터 20px내려오게 된다.
left:20px;
absolute요소를 감싸고 있는 relative요소를 기준으로.
left, 좌측선, border-line. 으로부터 안쪽으로,
20px이동한다.는 뜻이다.
결론적으로 기존 위치한 자리로부터 20px 오른쪽으로 이동하게 된다.
좀 더 정리해보자면,
top : 20px;
absolute요소를 감싸고 있는 relative요소의 상하좌우 선(border-line)을 기준으로
얼마나 옮길 것인가 하는것이다.
top일경우, 윗선을 기준으로, 20px (결과적으론 기존 위치보다 20px 내려간다.)
left의 경우, 좌측 선을 기준으로, 20px (결과적으로 기존 위치보다 우측으로 20px 이동한다.)
right와 bottom은???
아래의 포스팅을 슥 읽고 다시 이 글로 돌아와라.
CSS 왕초보 탈출하기 01 - HTML 세계의 중력
뉴턴의 사과는 아래로 떨어지지만 html의 사과는 좌측 상단으로 떨어진다. 뉴턴아조씨는 사과는 아래로 떨어진다고 했다. 현실에서 사과는 아래로 떨어진다. 우리는 당연히 알고있다. 하지만 우리가 HTML의 세계..
moriandtsuki.tistory.com
right일 경우, 하단 선을 기준으로 안쪽으로 20px이동한다.(결과적으로 맨 아래 위치로부터 20px이동한다.)
bottom일 경우, 우측 선을 기준으로 안쪽으로 20px이동한다. (결과적으로 맨 우측으로부터 왼쪽으로 20px이동한다.)
왜, left와 top은 기존 위치로부터 20px이동하는데.
right와 bottom은 그렇지 않은지 이해하는게 중요하다.
다시 정리하자면,
absolute요소를 감싸고 있는 relative요소의 상하좌우 선(border-line)을 기준으로 얼마나 옮길 것인가 하는것이다.
지금까지 position: relative가 걸린 요소로 감싸진 absolute의 관점에서 top,bottom,right, left를 다루어 보았다.
아래에서부터는 relative가 걸린 요소에 top bottom right left를 주면 어떻게 되는지 확인해보겠다.
기존 위치로부터 x (top,bottom,left,right 중 하나)의
선을 기준으로 20px이동한다.
-> 그냥 쉽다
top:20px; 기존 위치 기준으로하며 자기자신의 윗선을 기준으로 20px 아래로 이동
left:20px; 기존 위치 기준으로하며 자기자신의 좌측선을 기준으로 20px 우측으로 이동
특징으로는 기존의 위치한 레이아웃에 변동이 없는 부분이 있는데, 이부분은 따로 후에 다루도록 하겠다.
다음시간에는
float 속성에 대해서 다루어보자.