Absolute 포지셔닝

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 57번째.

CSS에서 절대 위치 지정(absolute positioning)을 사용하면 컨테이너 내부의 원하는 위치에 요소를 정확하게 배치할 수 있습니다.

position: absolute;를 설정하면, 해당 요소는 일반적인 레이아웃 흐름에서 제거되므로 다른 요소들은 마치 그 요소가 없는 것처럼 동작합니다. 이 요소는 static이 아닌 위치(position)가 설정된 가장 가까운 조상 요소를 기준으로 배치됩니다. 그러한 조상 요소가 없다면, 페이지를 기준으로 배치됩니다.

절대 위치 지정(absolute positioning)을 사용하기 위한 기본 구문은 다음과 같습니다:

.parent {
    position: relative; /* 부모를 위치 지정된 조상으로 만듭니다 */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: 부모 요소를 대상으로 하는 CSS 선택자입니다. position: relative;를 설정하면 절대 위치(absolute)가 지정된 자식 요소를 배치할 수 있습니다.

.child: 절대 위치를 지정하려는 요소를 대상으로 하는 CSS 선택자입니다.

position: absolute;: 이 선언은 요소의 배치 방식을 절대 위치로 설정하여, 일반적인 흐름에서 제거합니다.

top, right, bottom, left: 이 속성들은 가장 가까운 위치 지정 조상(positioned ancestor) 요소를 기준으로 요소의 위치를 지정합니다. 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위를 사용하여 양수 또는 음수 값을 지정할 수 있습니다.

예를 들어:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

이 예제에서 .parent 요소는 position: relative;를 사용하여 위치가 지정된 조상 요소로 설정됩니다. .child 요소는 position: absolute;를 사용하여 절대 위치로 지정되며, 가장 가까운 위치 지정 조상 요소(.parent 요소)를 기준으로 상단에서 50픽셀, 좌측에서 100픽셀 떨어진 위치로 설정됩니다.

챌린지

쉬움

부모 디비전(<div>)과 그 안에 box1 및 box2 클래스를 가진 두 개의 자식 디비전(<div>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 절대 위치 지정(absolute positioning)을 사용하여 parent 내에서 box2 요소의 위치를 지정하는 것입니다. 다음 단계를 따르세요:

parent 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성합니다. 해당 요소의 position 속성을 relative로 설정하여 위치가 지정된 조상 요소로 만듭니다.
box2 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
.box2 요소의 position 속성을 absolute로 설정합니다.
.box2 요소의 top 속성을 30px로, right 속성을 20px로 설정합니다. 이렇게 하면 위치가 지정된 조상 요소(parent)의 상단에서 30픽셀, 오른쪽에서 20픽셀 떨어진 곳에 박스가 배치됩니다.

직접 해보기

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>