앞서서 position 속성의 relative까지 살펴보았습니다. 이제 absolute에 대해서도 살펴보아야 하겠습니다.
▷ absolute
absolute는 정말이지 단어의 절대적인 뜻 풀이에 현혹(?)되어서는 안 되는 속성 값입니다. relative와 반대되는 '절대 위치'도 아니고 오히려 relative와 연계성이 강한 속성입니다. 다시 한번 말씀드리지만 position 속성의 relative와 absolute 속성 값은 단어의 의미로 연상하지 말고, 그냥 특성을 이해해야 합니다.
우선 position이 absolute로 선언된다면, 일단 기존의 HTML 문서 배치 컨텍스트에서 벗어나게 됩니다. 예를 들어 앞선 예제에서 <div> 세 개를 배치했는데, 두 번째 <div>에 적용하게 된다면 첫 번째와 세 번째 <div> 요소는 이어서 배치되지만 이 absolute 속성을 갖는 <div>는 완전히 다른 기준을 통해서 따로 놀게 되는 것이죠.
그럼 중요해지는 것은, 이 absolute 속성을 가진 요소는 어떤 '기준'을 통해서 배치되는 것인지의 여부입니다. 예를 들어 left, right, top, bottom 속성 값을 지정하게 되면 어떤 요소로부터 위치를 갖게 되는 것일까요? 여기서 또 하나 absolute의 중요한 특성이 나오게 됩니다. 바로 absolute 속성의 요소는 "해당 요소의 부모 요소를 기준으로" 배치하게 된다는 특성을 갖는 것입니다. 부모 요소를 따라 추적하다가 position이 static이 아닐 경우에 해당 부모 요소를 기준으로 배치하게 됩니다. 자, 이 말은 바꿔서 표현하면 사실상 대부분 position이 relative인 부모 요소를 기준으로 하게 됩니다.
그래서 대부분 어떤 요소를 absolute로 정하면, 기준이 되는 부모 요소를 relative로 position 값을 설정하는 것이 암묵적인 규칙이라고 볼 수 있습니다. 또한, absolute 속성일 경우 마진 값이 다른 마진 값과 collapse 되지 않는다는 특성을 갖게 되는 것도 기억해야 하는 사실입니다.
position 속성 값이 absolute인 요소의 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>position</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css_example.css">
</head>
<body>
<main>
<div>static</div>
<div>relative</div>
<div>static</div>
</main>
</body>
</html>
main {
position: relative;
width: 500px;
height: 600px;
background: purple;
}
div {
width: 300px;
height: 100px;
border: 1px solid;
background: rgb(22, 177, 61);
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
div:nth-of-type(2) {
position: absolute;
bottom: 8px;
right: 16px;
background: cyan;
opacity: 0.8;
}
위 예제에서 일부 태그의 요소가 수정되었습니다. 우선, <main>의 position이 relative로 선언되었고 두 번째 div:nth-of-type(2)의 position이 absolute로 변경되었습니다. 그럼 결국 이 요소의 bottom / right 속성의 기준은 main이 되겠죠?
그리고 설명했다시피 이 <div>요소는 absolute 속성이 되었기 때문에 다른 두 개의 <div> 배치 컨텍스트를 벗어나게 되므로 다른 두 개의 <div>는 딱 붙어서 배치됩니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 5. 배경 이미지와 그라데이션(1) - background color & clip (0) | 2023.05.01 |
|---|---|
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 4 : fixed, sticky (0) | 2023.04.27 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 2 : relative (0) | 2023.04.24 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 1 : static (0) | 2023.04.24 |
| [CSS] 4. 레이아웃 설계(2) - float 3 : 3단 레이아웃 (0) | 2023.04.20 |
