CSS에서 위치 지정 시 음수 값
우리가 배운 속성인 top, right,
bottom 및 left는
양수 값뿐만 아니라 음수 값도
가질 수 있습니다. 예제를 통해 살펴보겠습니다.
예제
다음 예제에서 요소는 부모를 기준으로 절대 위치가 지정되며
상단에서 0, 왼쪽에서 0 위치에 있습니다:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
예제
이제 요소를 상단에서
-20px, 왼쪽에서 -30px 위치로 이동시켜 보겠습니다:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
다음 샘플에서 녹색 블록은
margin을 사용하여 화면 중앙에 위치하며,
빨간색 블록은 그를 기준으로 상대적으로 위치합니다.
주어진 샘플에 따라 페이지를 복제하세요:
