[HTML/CSS] 10. CSS : Position

문정준

Mar 10, 2025

Contents

1. Static 2. Relative 3. Absolute 4. Fixed 실습

1. Static

모든 블럭의 기본 Position

왼쪽 → 오른쪽, 오른쪽이 꽉 차면 아래로 내려감

자동으로 위치가 정해지므로 임의로 움직일 수 없음

Margin을 주게 되면 다른 박스도 함께 영향을 받음

2. Relative

현재 위치의 시작점을 기준으로 배치

상, 하, 좌, 우로 움직일 수 있음

Top, Left, Right, Bottom

3. Absolute

새로운 Template을 깔아 위에 덮어씀

기준점이 없을 경우, Body ( 0, 0 ) 가 기준이 됨

원래 배치되어 있던 박스들이 정렬되어 올라오는데, 크기가 같으면 가려지게 됨

크기 변경 또는 위치 변경이 필요

✏️

박스 안에 박스를 넣어서 그 안에서 움직이게 하고 싶을 때

넣을 박스를 정해서, 부모 박스 안에 넣기

부모 박스에 position:relative 부여

자식 박스에 position:absolute 부여

자식 박스의 위치 지정

4. Fixed

특정 홈페이지의 팝업 광고 또는 팝업 메뉴와 같이, 화면에 고정되어 있게끔 배치

스크롤을 내려도 지정한 개체는 해당 위치에 고정되어 있음

absolute와 같이 새 Template에서 동작하므로 기존 개체들이 정렬되어 올라오게 됨

실습

검색 창 안에 빨간색 사각형을 넣은 블럭을 제작하시오.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: relative;
            display: inline-block;
            border: 1px solid black;
            border-radius: 6px;
        }

        .box {
            position: absolute;
            display: inline-block;
            top: 6px;
            right: 10px;
            border: 1px solid red;
            width: 10px;
            height: 10px;
        }

        .search {
            font-size: 20px;
            font-weight: 600;
            border: none;
            border-radius: 6px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input class=search type="text" placeholder="Search...">
        <div class="box"></div>
    </div>
</body>

</html>

See more posts

[HTML/CSS] 10. CSS : Position

1. Static

2. Relative

3. Absolute

박스 안에 박스를 넣어서 그 안에서 움직이게 하고 싶을 때

4. Fixed

실습

[HTML/CSS] 12-1. GridLayout 실습 1

[HTML/CSS] 11. Img CSS와 Icon

[HTML/CSS] 8. Input Design

[HTML/CSS] 7. Grid Layout