HTML - Position 속성

Jan 15, 2024

Contents

1. Static 2.Relative 3. Absolute 4. Fixed

💡

position 은 HTML 의 요소를 원하는 위치에 배치하기 위해 사용한다.

1. Static

static 은 HTML 의 기본 배치로 설정하지 않으면 자동으로 설정된다. static 은 배치된 순서대로 표시된다. 따라서 static 일 때는 요소의 위치를 지정할 수 없다.


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            display: inline-block;
            position: static;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
            display: inline-block;
            position: static;

        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: green;
            display: inline-block;
            position: static;

        }
    </style>

</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>

</html>

태그 안에 class 이름을 만들면 <style> 태그에 .클래스명으로 속성을 설정할 수 있다.

2.Relative

Relative 는 이전에 배치된 값을 기준으로 상대적인 위치로 배치하는 방법이다.

배치를 위해 left, right, top, bottom 을 사용한다.


<head>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            display: inline-block;
            position: static;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
            display: inline-block;
            position: relative;
					  top: 50px;
            left: 50px;
        }
        .box3 {
            width: 300px;
            height: 300px;
            background-color: green;
            display: inline-block;
            position: static;

        }
    </style>

</head>

노란색을 기준으로 빨간색의 위치가 달라진다.

만약 이전 값이 없다면 Relative 는 body 를 기준으로 상대 위치가 결정된다.


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            display: inline-block;
            position: relative;
            top: 100px;
            left: 100px;
        }

    </style>
</head>

<body>
    <div class="box1"></div>

</body>

</html>

3. Absolute

absolute 는 이전 값을 기준으로 위치되는게 아니라 새로운 페이지에 위치한다. 따라서 absolute 는 body 를 기준으로 위치가 정해진다.


<style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            display: inline-block;
            position: static;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
            display: inline-block;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: green;
            display: inline-block;
            position: static;
        }
    </style>

absolute 의 활용은 부모 클래스를 relative로 설정하고, 자식 클래스를 absolute 를 사용하는 방식으로 활용한다. 설명은 다음 블로그에서 예제와 함께 설명하겠다.

HTML - Relative 와 Absolute - {CODE-RYU};

HTML

https://inblog.ai/coderyu1/html-relative-와-absolute-14593?traffic_type=internal

4. Fixed

Fixed 는 브라우저의 스크롤을 쭉 내리더라도 고정적으로 위치시킨다. 주로 광고나, 스크롤 맨 위로 가는 버튼을 Fixed 로 사용한다.


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            display: inline-block;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
            display: inline-block;
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: bisque;
            display: inline-block;
            position: fixed;
            top: 50px;
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

</html>