[CSS] 10. CSS Position

김주희

Mar 12, 2025

Contents

1. static 2. relative 3. absolute 4. 박스 안의 박스 5. fixed 6. 예제

1. static

flow가 왼쪽에서 오른쪽

다 차면 밑으로 가서 다시 왼쪽에서 오른쪽

position의 default값


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

위치만 옮기고 싶으면


<!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;
            position: relative;
            top: 100px;
            left: 100px;
        }

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

3. absolute

종이가 한 장 더 만들어서 덧댄다

설정한 box만 위로 튀어나온..초록색은 static이니까 옆으로 정렬돼서 가려진다

top과 left가 body이므로 left를 0으로 설정


<!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;
            position: absolute;
            top: 100px;
            left: 0px;
        }

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

4. 박스 안의 박스

움직일 박스를 박스 안에 넣는다


    <div class="box4">
        <div class="box5"></div>
    </div>

부모 박스의 position 속성 relative 지정


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

자식 박스의 position 속성 absolute 지정


.box5 {
            width: 50px;
            height: 50px;
            background-color: bisque;
            display: inline-block;
            position: absolute;
        }

위치 지정


.box5 {
            width: 50px;
            height: 50px;
            background-color: bisque;
            display: inline-block;
            position: absolute;
            top: 100px;
            left: 100px;
        }


<!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: 50px;
            height: 50px;
            background-color: bisque;
            display: inline-block;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </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>

5. fixed

화면 고정 (sticky)

스크롤을 하더라도 여전히 초록색 상자가 같은 위치에서 보이도록


<!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;
            position: fixed;
            top: 300px;
        }

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

</html>

6. 예제

화면의 비율이 달라져도 여전히 빨간 박스가 input 안에 위치하도록 만들어 보자!


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box1{
            position: relative;
        }

        .box2{
            border : 1px solid red;
            width : 10px;
            height : 10px;
            display: inline-block;
            position: absolute;
            left: 153px;
            top: 7px;
        }

    </style>
</head>
<body>
    <div class = "box1">
        <div class = "box2"></div>
        <input type="text" placeholder="Search...">
    </div>
    
</body>
</html>

See more posts

[CSS] 10. CSS Position

1. static

2. relative

3. absolute

4. 박스 안의 박스

5. fixed

6. 예제

More articles

[CSS] 12. Grid-Layout 실습

[CSS] 11. Img CSS와 Icon

[CSS] 8. Input 디자인

[DB] 12.2. 트리 탐색 기법