상대 위치 지정

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 56번째.

CSS에서 relative positioning은 문서 흐름에서 요소를 normal position을 기준으로 배치할 수 있게 해 주는 positioning 방식입니다. 요소를 position: relative;로 설정하면 normal flow에 유지되지만, 그런 다음 top, right, bottom, left 속성을 사용하여 원래 위치에서 오프셋할 수 있습니다.

다음은 상대 위치 지정을 사용하는 기본 구문입니다:

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 클래스가 있는 element가 문서 흐름에서 원래 위치보다 아래로 20픽셀, 오른쪽으로 30픽셀 이동하여 배치됩니다. element가 원래 차지하던 공간은 유지되며, 다른 element는 그 공간으로 흘러 들어가지 않습니다.

챌린지

쉬움

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

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

직접 해보기

<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>