[CSS] 11. Position

Mar 10, 2025

Contents

1. 기본은 static이다.


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


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


       .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;
            left: 100px;
            bottom: 100px;
        }

💡

박스 안에서 박스를 놀게 하고 싶으면 박스 안에 박스를 넣어라.

부모 박스에 position : relative;를 준다.

자식한테 absolute를 준다.

위치를 지정한다.


        .box3 {
            width: 300px;
            height: 300px;
            background-color: green;
            display: inline-block;
            position: fixed; /*스크롤을 해도 항상 그 자리에 고정*/
            top: 300px;
        }

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

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

.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; left: 100px; bottom: 100px; }

.box3 { width: 300px; height: 300px; background-color: green; display: inline-block; position: fixed; /*스크롤을 해도 항상 그 자리에 고정*/ top: 300px; }