position 속성에 관하여

박영호·2020년 12월 15일

position 속성

position 속성이란?

position 속성은 웹 문서 안에서 요소들을 어떻게 배치할지 정하는 속성입니다.
position 속성을 이용하면 텍스트나 이미지를 원하는 위치에 배치하고 어떤 방식으로 놓을지도 결정할 수 있습니다.

position 종류

static : 요소를 문서 흐름에 맞추어 배치

relative : 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정

absolute : 원하는 위치를 지정해 배치(부모가 relative이면 부모 위치 기준으로 지정)

fixed : 지정한 위치에 고정하여 배치

static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position 속성</title>
    <style>
        div {
            margin: 10px;
            display: inline-block;
            width: 300px; height: 100px;
            border: 3px solid #000;
            font-size: 30px;
            font-weight: bold;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
        }
        .box3 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>box1</p>
    </div>
    <div class="box2">
        <p>box2</p>
    </div>
    <div class="box3">
        <p>box3</p>
    </div>
</body>
</html>

위에 코드는 position 속성을 써서 나타내진 않았지만 position: static 속성이라 보시면 됩니다.
static 속성은 브라우저에서 자연스럽게 해당 요소들의 위치를 결정하게 됩니다.보통 display 속성에 따라 배치가 결정됩니다. 위에 코드에서 display: inline-block 에 따라 왼쪽에서 오른쪽으로 요소의 위치가 결정된 걸 볼 수 있습니다.

relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position 속성</title>
    <style>
        div {
            margin: 10px;
            display: inline-block;
            width: 300px; height: 100px;
            border: 3px solid #000;
            font-size: 30px;
            font-weight: bold;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
            position: relative;
            top: 30px;
            left: -50px;
        }
        .box3 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>box1</p>
    </div>
    <div class="box2">
        <p>box2</p>
    </div>
    <div class="box3">
        <p>box3</p>
    </div>
</body>
</html>

static과 다르게 position: relative는 static 이었을 때 어느 위치였는지를 기준으로 상대적인 요소의
위치를 결정합니다. box2가 원래 static 위치를 기준으로 위로30px, 왼쪽으로 -50px을 움직인걸 알 수 있습니다.

absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position 속성</title>
    <style>
        div {
            margin: 10px;
            display: inline-block;
            width: 300px; height: 100px;
            border: 3px solid #000;
            font-size: 30px;
            font-weight: bold;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
            position: relative;
            top: 30px;
            left: -50px;
        }
        .box3 {
            background: yellow;
            position: absolute;
            top: -30px;
            left: 70px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>box1</p>
    </div>
    <div class="box2">
        <p>box2</p>
            <div class="box3">
                <p>box3</p>
            </div>
    </div>
</body>
</html>

box2 와 box3를 한 div에 묶음으로써 box3는 position: relative를 사용한 box2를 기준으로 위로 -30px, 왼쪽으로 70px 움직인걸 확인 할 수 있다.
따라서 box2가 움직인다면 box3도 따라 움직입니다.

fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position 속성</title>
    <style>
        div {
            margin: 10px;
            display: inline-block;
            width: 300px; height: 100px;
            border: 3px solid #000;
            font-size: 30px;
            font-weight: bold;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
            position: fixed;
            top: 300px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>box1</p>
    </div>
    <div class="box2">
        <p>box2</p>
    </div>
</body>
</html>

box2 요소는 position: fixed를 사용함으로써 브라우저 화면이 바뀌어도 고정된 위치에 있으며
상위 요소에 영향을 받지 않습니다.

박영호

무언가에 호기심이 생기면 적극적이고 재밌게 그걸 해결해내고 싶어하는 프론트 엔드 개발자 입니다 .