프론트엔드

[CSS] 포지션 Position

김씨 학생 2024. 1. 24. 18:09
Position

 

 

Posotion

요소의 위치를 지정하는 데 사용된다.

 

 

 

absolute

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position - absolute</title>
    <style>
        #element1 {
            z-index: 2;
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 30%;
            top: 20%;
        }

        #element2 {
            z-index: 1;
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
            left: 30%;
            top: 20%;
        }
    </style>
</head>
<body>
    <div id="element1"></div>
    <div id="element2"></div>
</body>
</html>

 

absolute는 독립적인 배치 문맥을 잡게 되며 left: 30%; top: 20%;을 하게 될 시 body 태그의 기준으로

왼쪽으로 30% 띄어지고 위쪽으로 20%띄어지게 된다.

 

결과)

 

absolute, left: 30%, top: 20%; 속성의 예시

 

 

 

relative

테두리를 만들어준다. 기본적으로 다른 요소의 영역을 침범하지 않는다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position - relative</title>
    <style>
        .element1, .element2 {
            position: relative;
            width: 200px;
            height: 100px;
            top: 0;
        }

        .element1 {
            background-color: coral;
        }

        .element2 {
            background-color: brown;
        }

        div.in1, div.in2 {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 50%;
            top: 50%;
            transform: translate(50%, -50%);
        }

        div.in1 {
            background-color: red;
            z-index: 2;
        }

        div.in2 {
            z-index: 1;
            background-color: violet;
        }

    </style>
</head>
<body>
    <div class="element1">
        <div class="in1"></div>
        <div class="in2"></div>
    </div>
    <div class="element2"></div>
</body>
</html>