CSS에서 좌표 없이 절대 위치 지정
사실 절대 위치를 지정할 때 좌표를 지정하는 것은
필수가 아닙니다. 요소에 단순히 position을
absolute 값으로 설정하기만 하면, 절대 위치가
지정되지만 원래 있던 자리에 그대로 머물게 됩니다.
이때 다른 모든 요소들은 마치 우리의 요소가 없는 것처럼
행동하여 그 위에 겹쳐질 수 있습니다.
예제를 통해 알아보겠습니다.
예제
먼저, 위치 지정 없이 세 개의 블록과 그 사이에 약간의 텍스트를 만들어 보겠습니다:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
예제
이제 녹색 블록에 absolute를 추가해 보겠습니다.
결과적으로 이 블록은 제자리에 남아 있게 되고,
아래의 모든 요소들은 마치 우리 요소가 없는 것처럼
행동하여 그 위에 겹쳐지게 됩니다:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
예제
이제 수직 위치는 추가하지 않고 left 속성만
추가해 보겠습니다. 결과적으로 수평 방향으로는
지정한 값에 위치하게 되고, 수직 방향으로는
원래 서 있던 자리에 그대로 머물게 됩니다:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* 수평 위치 추가 */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
예제
이번에는 반대로, 수평 위치는 추가하지 않고
top 속성만 추가해 보겠습니다.
결과적으로 수직 방향으로는 지정한 값에
위치하게 되고, 수평 방향으로는 원래 서 있던
자리에 그대로 머물게 됩니다:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* 수직 위치 추가 */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
