CSS

CSS 디스플레이 포지션

테라시아 2024. 11. 25. 16:25

Layout - Position
    - 각 요소마다 배치되는 방식(위치)

(1) static(기본)
    - 나오는 순서대로 배치

(2) absolute
    - top, left, right, bottom
    - 상위 엘리먼트의 기준점을 기준으로 위치 지정

(3) relative
    - top, left, right, bottom
    - 원래 내가 있어야 할 위치를 기준으로 위치 지정

(4) fixed
    - 전체 화면(Viewport)을 기준으로 위치 지정

 

☆ Code

<!doctype html>
<html>
<head>
    <title>Position</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
    <style>
        body > div > div {
            width: 200px;
            height: 150px;
            background-color: lemonchiffon;
            border: 1px solid orange;

            font-family: "Noto Sans KR";
            font-size: 20px;

            text-align: center;
            line-height: 150px;
        }

        .relative {
            position: relative;
            top: -100px;
            left: 150px;
            background: red;
            z-index: 2;
        }

        .absolute {
            position: absolute;
            top: 100px;
            left: 100px;
            background: yellow;
            z-index: 10000;
        }

        .wrap {
            background-color: beige;
            position: fixed;
            width: 100%;
            top: 100px;
            left: 20px;
        }

        .fixed {
            position: fixed;
            top: 80px;
            left: 60px;
            background: blue;
            z-index: 3;
        }
    </style>
</head>
<body>
    <h1>Layout - Position</h1>
    <hr>
    <div class="wrap">
        <div class="static">static(default)</div>
        <div class="static">static2(default)</div>
        <div class="relative">relative</div>
        <div class="fixed">fixed</div>
        <div class="absolute">absolute</div>
    </div>
</body>
</html>