CSS

CSS position 속성 완벽 가이드: static, relative, absolute, fixed 차이점 정리

by mystee
포스트 썸네일 이미지

지난 포스트에서는 '마진 겹침' 현상에 대해서 알아보았다.

이번에는 박스들을 화면상의 원하는 곳에 배치하는 방법을 알아보려고 한다.

단순히 순서대로 쌓이는 것을 넘어, 요소를 특정 위치에 고정하거나 공중에 띄우는 등 자유로운 레이아웃을 가능하게 해주는 position 속성 4가지를 정리해 보겠다.




이전 포스트

CSS 마진 겹침 현상 이해하기: 3가지 발생 사례

CSS에서 상하 마진이 더 큰 값 하나로 병합되는 '마진 겹침' 현상의 3가지 대표 사례(인접 요소, 부모-자식, 빈 요소)를 정리했습니다. 왜 이런 현상이 발생하는지, 그리고 border나 padding을 이용해 어떻게 해결할 수 있는지 상세히 알아보세요.




생활코딩 CSS 수업 영상: static VS relative





<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            border: 1px solid gray;
        }
        div {
            border: 5px solid tomato;
            margin: 10px;
        }
        #me {
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div id="other">other</div>
    <div id="parent">
        parent
        <div id="me">me</div>
    </div>
</body>
</html>

위의 생활코딩 수업 영상에서 사용한 코드다.




1. static (기본값)

모든 HTML 요소의 기본 상태다.

특별히 position 속성을 지정하지 않았다면 모든 태그는 static인 상태다.


  • 특징: HTML 코드에 쓴 순서대로 차곡차곡 쌓인다. (위에서 아래로, 왼쪽에서 오른쪽으로)
  • 제약: top, bottom, left, right 속성을 부여해도 전혀 반응하지 않는다.
  • 비유: 단단히 고정된 '붙박이 가구'와 같다. 옮기고 싶어도 원래 정해진 자리에서 움직이지 않는다.



2. relative (상대적 위치)

요소의 원래 자리를 기준으로 위치를 살짝 이동시키고 싶을 때 사용한다.


  • 특징: 원래 자신이 있어야 할 static 위치를 기억하고 있다. 그 상태에서 top, left 등을 주면 원래 자리에서부터 이동한다.
  • 공간 보존: 요소가 이동하더라도 원래 있던 빈 자리는 그대로 남아 있다. 다른 요소들이 그 자리를 치고 들어오지 못한다.
  • 비유: 원래 서있던 자리에서 한 발자국 옆으로 옮겨 서는 것과 같다. 기준점은 항상 '내가 원래 있었어야 할 곳'이다.




position: relative;일 때, left와 right가 같이 들어가면 left만 따르고, top과 bottom이 같이 들어가면 top만 따른다.

글을 읽을 때 보통 왼쪽에서 오른쪽으로, 위에서 아래로 읽는 것처럼 CSS도 이와 비슷하게 '시작점'에 더 큰 힘을 실어주는 것이다.





생활코딩 CSS 수업 영상: absolute





<!DOCTYPE html>
<html>
<head>
    <style>
        #parent, #other, #grand {
            border: 5px solid tomato;
        }
        #grand {
            position: relative;
        }
        #me {
            background-color: black;
            color: white;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="other">other</div>
    <div id="grand">
        grand
        <div id="parent">
            parent
            <div id="me">me</div>
        </div>
    </div>
</body>
</html>




1. absolute (절대적 위치)

단어 뜻 그대로 절대적인 위치를 갖게 되는데, 가장 큰 특징은 '문서의 일반적인 흐름에서 완전히 벗어난다'는 점이다.


  • 붕 떠 있는 상태: absolute를 주는 순간, 그 요소는 원래 있던 자리에서 쑥 빠져나와 공중에 둥둥 떠 있게 된다.
  • 공간 실종: 원래 그 요소가 차지하던 자리는 사라진다. 그래서 뒤에 있던 다른 요소들이 그 자리를 치고 들어옵니다. (레이아웃이 겹치게 되는 주된 이유다.)
  • 크기의 변화: 블록 요소였더라도 absolute가 되면 콘텐츠의 양만큼만 공간을 차지하며 너비가 줄어든다. (인라인처럼 변하지만 width와 height로 크기 조절은 가능한 상태가 된다.)



2. 위치의 기준점

relative가 '원래 내 자리'를 기준으로 움직였다면, absolute는 '기준이 되는 부모 요소'를 찾아 나선다.


  • 조상을 탐색: 나를 감싸고 있는 부모들 중에 position이 static이 아닌 (주로 relative, absolute, fixed) 요소를 찾는다.
  • 기준점 확정: 가장 가까운 곳에 있는 '기준이 되는 조상'을 발견하면, 그 박스의 왼쪽 상단을 (0, 0)으로 잡고 움직인다.
  • 최후의 수단: 만약 아무리 올라가도 기준이 되는 부모가 없다면, 결국 화면 전체인 <body>나 최상위 브라우저 창을 기준으로 삼게 된다.


그래서 공식처럼 쓰이는 조합은, 부모에게 relative(울타리)를 주고, 자식에게 absolute(움직이는 말)를 준다.





생활코딩 CSS 수업 영상: fixed





<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            padding-top: 30px;
        }
        #parent, #other {
            border: 5px solid tomato;
        }
        #large {
            height: 10000px;
            background-color: tomato;
        }
        #me {
            background-color: black;
            color: white;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="other">other</div>
    <div id="parent">
        parent
        <div id="me">me</div>
    </div>
    <div id="large">large</div>
</body>
</html>




1. fixed (고정 위치)

absolute가 '특정 부모'를 기준으로 움직였다면, fixed는 부모가 누구든 상관하지 않고 오직 브라우저 창만을 기준으로 삼는다.


  • 화면 고정: 페이지를 위아래로 길게 스크롤해도 fixed된 요소는 마치 화면에 붙어 있는 스티커처럼 그 자리에 가만히 있는다.
  • 공간 실종: absolute와 마찬가지로 원래 차지하던 공간은 완전히 사라진다. 뒤에 오는 요소들이 그 자리를 메우게 된다.
  • 기준점: 항상 브라우저 창의 왼쪽 상단(0, 0)이 기준이다.



2. 실무에서는 언제 쓰일까?

우리가 웹사이트를 볼 때 자주 마주치는 아래와 같은 요소들이 대부분 fixed로 만들어진다.


  • 상단 네비게이션 바: 스크롤을 내려도 메뉴가 계속 따라올 때
  • 우측 하단 TOP 버튼: 클릭하면 맨 위로 올려주는 버튼 (이 블로그에도 있다)
  • 팝업 공지사항: 화면 정중앙에 고정되어 나타나는 창





position 속성, 표로 한눈에 비교하기


속성 위치 기준 원래 공간 차지 여부 특징 및 용도
static 문서의 자연스러운 흐름 있음 기본값. 위치 조절(top, left 등) 불가.
relative 자신의 원래 위치 있음 원래 자리를 비워두고 살짝 이동할 때 사용.
absolute 위치가 지정된 조상 없음 흐름에서 벗어나 부모 안에서 자유롭게 배치.
fixed 브라우저 창 없음 스크롤을 내려도 항상 화면의 같은 위치에 고정.




다음 포스트

CSS flex 기초 완벽 정리, 레이아웃의 혁명 Flex의 등장 배경과 핵심 속성

웹 레이아웃의 역사는 Flexbox 이전과 이후로 나뉩니다. 왜 flex가 '혁명'이라 불리는지 그 배경을 알아보고, 부모 컨테이너의 flex-direction 설정법과 자식 아이템의 크기를 결정하는 basis, grow, shrink 속성까지 자세히 정리했습니다.
이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
Tags

작성자: mystee

다음 이전

댓글 쓰기

0 Comments

댓글 쓰기

🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩

문의하기 양식