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

15700 단어 CSSCSS

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 속성

[코딩테스트 C++] 알고스팟
jQuery Selector (4) 탐색선택자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage