Relative 포지셔닝

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

CSS에서 상대 위치 지정(relative positioning)은 요소를 문서 흐름상의 정상적인 위치를 기준으로 배치할 수 있게 해주는 배치 방식입니다. 요소가 position: relative;로 설정되면, 일반적인 흐름 내에 유지되지만, top, right, bottom, left 속성을 사용하여 원래 위치로부터 오프셋을 적용할 수 있습니다.

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

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: 이 선언은 요소의 배치 체계를 상대적으로 설정합니다.
top, right, bottom, left: 이 속성들은 요소의 정상 위치로부터의 오프셋을 지정합니다. 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정된 양수 또는 음수 값을 사용할 수 있습니다.

예를 들어:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

이 예제에서 클래스가 box인 요소는 문서 흐름상의 원래 위치에서 아래로 20픽셀, 오른쪽으로 30픽셀 떨어진 곳에 배치됩니다. 원래 차지하던 공간은 유지되며, 다른 요소들이 그 공간으로 흘러 들어오지 않습니다.

챌린지

쉬움

box1, box2, box3 클래스를 가진 세 개의 자식 div(<div>)를 포함하는 HTML 문서가 주어집니다. 여러분의 과제는 상대 위치 지정(relative positioning)을 사용하여 box2 요소를 이동시키는 것입니다. 아래 단계를 따르세요:

box2 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
.box2 요소의 position 속성을 relative로 설정하세요.
.box2 요소의 top 속성을 20px로, left 속성을 40px로 설정하세요. 이렇게 하면 상자가 원래 위치에서 아래로 20픽셀, 오른쪽으로 40픽셀 이동합니다.

치트 시트

상대 위치 지정(Relative positioning)은 position: relative;를 사용하여 요소를 문서 흐름상의 원래 위치를 기준으로 배치할 수 있게 해줍니다.

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

요소는 일반적인 흐름 속에 남아 있지만, top, right, bottom, left 속성을 사용하여 위치를 이동시킬 수 있습니다. 요소가 원래 차지하던 공간은 그대로 유지됩니다.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

이것은 요소를 원래 위치에서 아래로 20px, 오른쪽으로 30px 이동시킵니다.

직접 해보기

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>