CSS에서 요소의 position 속성을 absolute(절대)로 설정하면, 해당 요소는 static이 아닌 위치 값을 가진 가장 가까운 조상(부모) 요소를 기준으로 배치됩니다. 만약 그러한 조상 요소가 존재하지 않는다면 뷰포트(초기 컨테이닝 블록)를 기준으로 위치하게 됩니다.
절대 위치 지정된 요소는 left, right, top, bottom과 같은 CSS 위치 속성을 통해 정확한 좌표를 지정할 수 있으며, 일반 문서 흐름(normal flow)에서 완전히 분리되므로 주변 요소의 배치에는 영향을 주지 않습니다.
절대 위치 지정의 핵심 특징
- 기준점: static이 아닌 position 값을 가진 가장 가까운 부모(조상) 요소
- 흐름 이탈: 일반 배치 흐름에서 제거되어 다른 요소와 겹칠 수 있음
- 좌표 제어: top, right, bottom, left 속성으로 세밀한 위치 조절 가능
- 쌓임 순서: z-index 속성으로 요소 간 겹침 순서를 조절할 수 있음
예제 1: 절대 위치 지정 기본 활용
다음은 CSS 절대 위치 지정 방식을 활용한 예제입니다 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div:first-child {
background-color: orange;
text-align: center;
}
div:last-child {
width: 250px;
height: 100px;
margin: auto;
background-color: turquoise;
position: absolute;
z-index: -1;
top:0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>데모 텍스트</div>
<p>ICC(International Cricket Council)는 1909년에 설립된 크리켓 종목의 국제 관리 기구입니다........</p>
<div>
</div>
</body>
</html>출력 결과
위 코드의 실행 결과는 다음과 같습니다 −
예제 2: relative · absolute · fixed 비교
이번에는 여러 위치 지정 방식을 한눈에 비교할 수 있는 예제입니다 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /*부모 d1 기준*/
}
#d3 {
position: fixed;
width: 30%;
top:10em; /*뷰포트 기준*/
}
</style>
</head>
<body>
<div id="d1">MySQL은 가장 널리 사용되는 오픈 소스 관계형 SQL 데이터베이스 관리 시스템입니다.
MySQL은 다양한 웹 기반 소프트웨어 애플리케이션 개발에 활용되는 최고의 RDBMS 중 하나입니다. <mark>relative(상대)</mark>
<div id="d2"><mark>absolute(절대)</mark></div>
<div id="d3"><mark>fixed(고정)</mark></div>
</div>
</body>
</html>출력 결과
위 코드의 실행 결과는 다음과 같습니다 −
