[CSS] Positioning - position: relative

gimyeondong 2020. 4. 7. 10:05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{
            width: 300px;height: 300px;
        }
        .box{
            width:100px;height: 100px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
        </div>
    </div>
</body>
</html>

작은 box의 위치를 옮기고 싶을때

margin, padding -> 이동보다는 크기가 커졌다는 개념 -> 다른 문제가 발생 할수도 있음

Positioning

static (default)

HTML Element가 기본으로 가지는 위치설정
Nomal Flow 영역의 기본규칙에 따라 배치 됨

relative

기본적으로 Nomal Flow 규칙에 따라 요소가 원래 있어야 하는 위치로부터
Top / Left / bottom / right 속성을 이용하여 위치를 조정할 수 있다.

absolute

fixed

relative

        .box{
            width:100px;
            height: 100px;
            position: relative;
            top:20px;
            left: 20px;
        }

relative - '원래 있어야 하는 위치'로부터 이동한다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        div{border: 1px solid black;}
        .wrapper{
            width: 300px;height: 300px;
        }
        .box1{
            width:100px;
            height: 100px;
        }
        .box2{
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">
        </div>
        <div class="box2">
        </div>
    </div>
</body>
</html>

        .box2{
            width:100px;
            height: 100px;
            position: relative;
            top: 20px;
        }

        .box2{
            width:100px;
            height: 100px;
            position: relative;
            bottom: 20px;
        }