style css position 이해하기

2025. 1. 9. 11:07

CSS의 position 속성은 HTML 요소의 위치를 설정하고 제어하는 데 사용됩니다. 다양한 position 값에 따라 요소의 위치가 문서의 다른 요소나 부모 요소를 기준으로 결정됩니다.

1. position: static (기본값)

static은 모든 요소의 기본 위치 지정 방법입니다. 요소는 HTML 문서의 정적인 흐름에 따라 배치됩니다.
top, right, bottom, left 속성은 static 위치에서는 무시됩니다.

특징

문서의 기본 배치 순서에 따라 요소가 위치합니다.
별도의 위치 지정 없이 요소가 표시됩니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position: Static</title>
    <style>
        .static-example {
            position: static;
            background-color: lightblue;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1>Static Position Example</h1>
    <div class="static-example">This is a static element.</div>
    <div class="static-example">Another static element.</div>
</body>
</html>

2. position: relative

relative는 요소를 기본 위치에서 상대적으로 이동시키는 데 사용됩니다.
top, right, bottom, left 속성을 사용하여 이동을 지정할 수 있습니다.

특징

요소는 문서 흐름에 따라 배치되지만, 지정된 값만큼 이동합니다.
원래 위치는 여전히 다른 요소에 영향을 줍니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position: Relative</title>
    <style>
        .relative-example {
            position: relative;
            background-color: lightgreen;
            padding: 10px;
            margin: 5px;
            top: 20px;
            left: 10px;
        }
    </style>
</head>
<body>
    <h1>Relative Position Example</h1>
    <div class="relative-example">This element is moved 20px down and 10px to the right.</div>
</body>
</html>

3. position: absolute

absolute는 가장 가까운 조상 요소 중 position이 relative, absolute, 또는 fixed로 설정된 요소를 기준으로 위치를 지정합니다.
만약 그러한 조상 요소가 없으면 body를 기준으로 위치가 설정됩니다.

특징

요소는 문서 흐름에서 제거되어 다른 요소에 영향을 미치지 않습니다.
top, right, bottom, left를 사용하여 위치를 설정합니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position: Absolute</title>
    <style>
        .container {
            position: relative;
            background-color: lightgray;
            width: 300px;
            height: 300px;
        }
        .absolute-example {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: pink;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Absolute Position Example</h1>
    <div class="container">
        <div class="absolute-example">This is an absolutely positioned element.</div>
    </div>
</body>
</html>

4. position: fixed

fixed는 브라우저 창을 기준으로 위치가 고정됩니다. 스크롤을 해도 위치가 변하지 않습니다.

특징

요소는 문서 흐름에서 제거됩니다.
항상 뷰포트를 기준으로 고정됩니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position: Fixed</title>
    <style>
        .fixed-example {
            position: fixed;
            top: 0;
            right: 0;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Fixed Position Example</h1>
    <p>Scroll down to see the fixed element stay in the same position.</p>
    <div class="fixed-example">This element is fixed at the top-right corner.</div>
    <div style="height: 1500px;">Scroll me!</div>
</body>
</html>

5. position: sticky

sticky는 스크롤 위치에 따라 동적으로 동작합니다. 지정된 위치에 도달하기 전에는 relative처럼 동작하고, 도달한 이후에는 fixed처럼 동작합니다.

특징

스크롤할 때 지정된 top, left, right, bottom 값에 따라 위치가 고정됩니다.
부모 요소의 범위를 벗어나지 않습니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position: Sticky</title>
    <style>
        .sticky-example {
            position: sticky;
            top: 0;
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Sticky Position Example</h1>
    <div class="sticky-example">This element becomes sticky when you scroll down.</div>
    <div style="height: 1500px;">Scroll me!</div>
</body>
</html>

6. 기타 속성과의 조합

position 속성은 다양한 레이아웃 속성과 함께 사용될 때 유용합니다. 예를 들어, z-index를 사용하면 요소의 쌓임 순서를 제어할 수 있습니다.

예제 (z-index와의 조합)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position with Z-Index</title>
    <style>
        .background {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: lightgray;
            width: 200px;
            height: 200px;
            z-index: 1;
        }
        .foreground {
            position: absolute;
            top: 100px;
            left: 100px;
            background-color: lightgreen;
            width: 150px;
            height: 150px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <h1>Position with Z-Index</h1>
    <div class="background">Background Element</div>
    <div class="foreground">Foreground Element</div>
</body>
</html>

결론

CSS의 position 속성은 웹 페이지의 레이아웃 설계에 있어 필수적인 도구입니다. 각 값(static, relative, absolute, fixed, sticky)의 동작을 이해하고 적절히 활용하면 더욱 정교하고 유연한 레이아웃을 설계할 수 있습니다. 위 예제들을 활용하여 실제 프로젝트에 적용해보세요!

저작자표시

'개발 > CSS' 카테고리의 다른 글

CSS position: sticky를 활용한 상세 예제 (0)	2025.01.10
style css padding, margin 이해하기 (0)	2025.01.09
style css display 이해하기 (0)	2025.01.09
CSS의 Flex 속성에 대한 완벽 가이드 (0)	2025.01.08
테이블 Td나 Div에 문자열이 길 경우 말줄임표 기능 표현 (0)	2019.03.08

subinto의 개발노트