Position 속성

[HTML] Postition - static, relative, absoulte, fixed

Jan 15, 2024

Contents

1. static 2. relative 3. absoulte 4. fixed

1. static

물 흐르듯 하는 성질

defalut 값으로 설정되어있다.


<!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: green; 
           display: inline-block;
        }
        .box4{
           width:300px;
           height:300px;
           background-color: blue; 
           display: inline-block;
        }
        .box5{
           width:300px;
           height:300px;
           background-color: bisque; 
           display: inline-block;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>

결과

2. relative

앞에있는 element와의 상대적 위치를 결정한다.

static에서 box2만 수정


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

결과

3. absoulte

3-1. 사용하면 도화지가 하나 더 생긴다


<!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: green;
            display: inline-block;
        }

        .box4 {
            width: 300px;
            height: 300px;
            background-color: blue;
            display: inline-block;
        }

        .box5 {
            width: 200px;
            height: 200px;
            background-color: bisque;
            display: inline-block;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

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

</body>

</html>

결과

3-2. 자식을 먼저 그리고 부모를 그린다 → 이때 부모를 relative, 자식을 absoltue로 하면 부모의 위치가 자식의 위치 기준이 된다.


<!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: green;
            display: inline-block;
        }

        .box4 {
            width: 300px;
            height: 300px;
            background-color: blue;
            display: inline-block;
            position: relative;
        }

        .box5 {
            width: 200px;
            height: 200px;
            background-color: bisque;
            display: inline-block;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

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


</body>

</html>

결과

4. fixed

body를 기준으로 위치를 잡음.

스크롤을 해도 계속 남아있음. (광고할 때 쓰는 디자인)


<!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: green;
            display: inline-block;
        }

        .box4 {
            width: 300px;
            height: 300px;
            background-color: blue;
            display: inline-block;
        }

        .box5 {
            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>
    <div class="box4"></div>
    <div class="box5"></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 />
</body>

</html>

결과