본문 바로가기
CSS/CSS

CSS) position (static, relative, absolute, fixed, sticky)

by 박채니 2022. 5. 16.

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.


문서 상 배치를 결정하는 속성

① static (기본값)

- 문서에 정의된 대로 배치하는 속성

- float 등을 이용하여 좌우배치

- offset(left, top, right, bottom) 무시

 

② relative

- 문서에 정의된 대로 배치하는 속성

- offset(left, top, right, bottom) 을 적용

 

③ absolute

- 요소를 겹쳐서 표현 가능

- 가장 가까운 static이 아닌 부모요소 기준 offset을 적용

 

④ fixed

- viewport 기준으로 offset 적용

 

⑤ sticky

- relative처럼 작동하다 특정 offset(top:0px)에 다다르면 fixed처럼 작동


static

 

HTML 코드

<h2>static</h2>
<div class="outer">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</div>

 

CSS 코드

<style>
    .outer {
        background-color: lightgray;
        border: 1px solid black;
        margin-bottom: 200px;
    }
    .first {
        width: 300px;
        height: 300px;
        background-color: thistle;
    }
    .second {
        width: 200px;
        height: 200px;
        background-color: violet;
        /* offset 설정 */
        left: 50px;
        top: 50px;
    }
    .third {
        width: 100px;
        height: 100px;
        background-color: magenta;
        left: 100px;
        top: 100px;
    }
</style>

 

.second와 .third에 대하여 left/top offset을 적용하였지만, 적용되지 않았으며 문서에 정의된 대로 배치된 것을 확인할 수 있습니다.

 


relative

 

HTML 코드

<h2>relative</h2>
<div class="outer">
    <div class="first"></div>
    <div class="second relative"></div>
    <div class="third relative"></div>
</div>

 

CSS 코드

<style>
    .outer {
        background-color: lightgray;
        border: 1px solid black;
        margin-bottom: 200px;
    }
    .first {
        width: 300px;
        height: 300px;
        background-color: thistle;
    }
    .second {
        width: 200px;
        height: 200px;
        background-color: violet;
        /* offset 설정 */
        left: 50px;
        top: 50px;
    }
    .third {
        width: 100px;
        height: 100px;
        background-color: magenta;
        left: 100px;
        top: 100px;
    }
    .relative {position: relative;}
</style>

static과 달리 .second와 .third에 적용한 offset이 적용된 것을 확인할 수 있습니다.

또한 마찬가지로 문서에 정의된 대로 배치되었습니다.

 


absolute

 

HTML 코드

<h2>absolute</h2>
<div class="outer">
    <div class="first"></div>
    <div class="second absolute"></div>
    <div class="third absolute"></div>
</div>

 

CSS 코드

<style>
    .outer {
        background-color: lightgray;
        border: 1px solid black;
        margin-bottom: 200px;
    }
    .first {
        width: 300px;
        height: 300px;
        background-color: thistle;
    }
    .second {
        width: 200px;
        height: 200px;
        background-color: violet;
        /* offset 설정 */
        left: 50px;
        top: 50px;
    }
    .third {
        width: 100px;
        height: 100px;
        background-color: magenta;
        left: 100px;
        top: 100px;
    }
    .absolute {position: absolute;}
</style>

offset을 적용했던 .second와 .thrid가 부모인 .outer를 탈출해버렸습니다.

 

그 이유는, 가장 가까운 static이 아닌 부모요소를 기준으로 offset이 적용되기 때문입니다.

현재 부모요소인 .outer는 position을 지정하지 않았으므로 기본값인 static이 적용되어 있습니다.

따라서 그 다음 부모인 <body>를 기준으로 offset이 적용되어버린 것이죠.

부모인 .outer 내에서 겹쳐진 요소를 표현하고 싶다면 .outer의 position을 지정해줘야 합니다.

 

<h2>absolute</h2>
<div class="outer relative">
    <div class="first"></div>
    <div class="second absolute"></div>
    <div class="third absolute"></div>
</div>

 


fixed

 

HTML 코드

<h2>fixed</h2>
<div class="fourth fixed"></div>

 

CSS 코드

<style>
    .fourth {
        width: 100px;
        height: 100px;
        background-color: tomato;
        right: 50px;
        bottom: 50px;
        border-radius: 50%;
    }
    .fixed {position: fixed;}
</style>

 

viewport를 기준으로 offset이 적용되기 때문에 viewport의 right 50px, bottom 50px 떨어진 부분에 대해 위치가 고정 되어 있는 것을 확인할 수 있습니다.

 


sticky

 

HTML 코드

<body>
    <h2 class="sticky">static</h2>
    <div class="outer">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
    </div>

    <h2 class="sticky">relative</h2>
    <div class="outer">
        <div class="first"></div>
        <div class="second relative"></div>
        <div class="third relative"></div>
    </div>

    <h2 class="sticky">absolute</h2>
    <div class="outer relative">
        <div class="first"></div>
        <div class="second absolute"></div>
        <div class="third absolute"></div>
    </div>

    <h2 class="sticky">fixed</h2>
    <div class="fourth fixed"></div>
</body>

 

CSS 코드

<style>
    .outer {
        background-color: lightgray;
        border: 1px solid black;
        margin-bottom: 200px;
    }
    .first {
        width: 300px;
        height: 300px;
        background-color: thistle;
    }
    .second {
        width: 200px;
        height: 200px;
        background-color: violet;
        /* offset 설정 */
        left: 50px;
        top: 50px;
    }
    .third {
        width: 100px;
        height: 100px;
        background-color: magenta;
        left: 100px;
        top: 100px;
    }
    .fourth {
        width: 100px;
        height: 100px;
        background-color: tomato;
        right: 50px;
        bottom: 50px;
        border-radius: 50%;
    }
    .sticky {
        position: sticky;
        top: 0px;
        background-color: rosybrown;
        z-index: 999; /* z축 기준 값이 클수록 위에 위치 */ 
    }
    .fixed {position: fixed;}
    .absolute {position: absolute;}
    .relative {position: relative;}
</style>

relative처럼 동작되다가 특정 offset에 다다르면 fixed처럼 작동합니다.

따라서 top: 0px이 되었을 때는 고정된 것처럼 보입니다.

z-index값을 크게 주어 맨 앞에 위치하도록 하였습니다. (그렇지 않으면 요소 뒤로 감춰져버리는 경우가 있음)