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

uoayop·2021년 5월 4일

CSS

목록 보기

4/6

position? 📌

position 속성은 요소들을 특정 위치에 고정되어 있도록 만들 때 유용하게 쓰인다.

position:static 📦

모든 태그의 default 값이다.
위치를 임의로 배치할 수 없으며 알아서 배치된다.

<div style="width: 100px; height: 100px; background-color: yellow;">div1</div>
<div style="width: 100px; height: 100px; background-color: greenyellow;"> div2</div>

position: relative 📐

상대적으로 위치를 지정할 수 있다.
static일 때의 원래 위치를 기준으로 상대 위치를 지정할 수 있다.
top, right, left, bottom 으로 원래 위치에서 얼마나 멀어질 지 정한다. (margin 같은 느낌)

<div style="
        width: 100px; 
        height: 100px; 
        background-color: yellow;">
        div1
</div>
    
<div style="
        width: 100px; 
        height: 100px; 
        background-color: greenyellow; 
        position: relative;
        top: 100px;
        left: 100px;"> 
        div2
</div>

position: absolute 📐 + 📐

position이 relative 인 상위 요소를 기준으로 상대 위치를 지정할 수 있다.
상대 위치의 상대 위치!

<div style="
        width: 300px; 
        height: 300px; 
        background-color: yellow;
        position: relative;">
        
        <div style="background-color: greenyellow">기본 위치</div>
        <div
            style="
            position: absolute;
            background-color: antiquewhite;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;">
            absolute 요소
        </div>
    </div>

position: fixed 📍

화면을 기준으로 상대적인 위치를 설정할 수 있다.
무조건 화면 상단에 붙어있는 네비게이션, 하단에 붙어있는 버튼 등을 구현할 때 사용된다.

<body style="height: 500px;">
    <div style="
        width: 80%;
        height: 100px; 
        background-color: antiquewhite;
        position: fixed;">
        네비게이션바
    </div>
</body>

position: sticky 🍃

fixed가 화면을 기준으로 반드시 그 자리에 위치한다면,
sticky는 어느정도 화면을 따라 이동하지만, 스크롤 위치가 임계점에 이르면 fixed와 같은 역할을 한다.
특정 웹페이지의 우측에 위치하는 광고배너를 떠올릴 수 있겠다. (나를 따라온다)

<body style="height: 2000px;">
    <div style="
        width: 80%;
        height: 100px; 
        background-color: antiquewhite;
        position: fixed;">
        fixed
    </div>

    <div style="
        width: 300px;
        height: 100px; 
        background-color: lightskyblue;
        position: sticky;
        top: 0px;
        margin-top:200px;
        float:right;">
        sticky
    </div>
</body>

[출처]

[코뮤니티] 한 입, 웹개발 #9. position 속성

uoayop

slow and steady wins the race 🐢

이전 포스트

display (block, inline, inline-block)

다음 포스트

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

CSS

position? 📌

position:static 📦

position: relative 📐

position: absolute 📐 + 📐

position: fixed 📍

position: sticky 🍃

display (block, inline, inline-block)

display (flex)

0개의 댓글