[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;
        }

See more posts

[CSS] 11. Position

1. 기본은 static이다.

2. relative는

More articles

[CSS] 13. Object-fit

[CSS] 12. 아이콘 & 스타일 시트

[CSS] 10. Input 디자인

[CSS] 9. Grid-column