position: sticky, fixed

9365 단어 CSSCSS 
<body>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
        <div class="box box6"></div>
        <div class="box box7"></div>
        <div class="box box8"></div>
        <div class="box box9"></div>
        <div class="box box10"></div>
    </div>
</body>
.container{
    position: relative;
    top: 100px;
    left: 100px;
    background-color: beige;
    }
       
.box{
    width: 80px;
    height: 80px;
    background-color: chocolate;
    margin-bottom: 20px;
    }

sticky

.box2 {
    background-color: hotpink;
    position: sticky;
    top: 0px;
    left: 0px;
    }

  • sticky는 부모를 기준으로 동작, position 프로퍼티(top, left..등) 필수

  • 기존 자기 자리를 유지하면서 스크롤링이 될 때 고정


fixed

.box2 {
    background-color: hotpink;
    position: fixed;
    top: 0px;
    left: 0px;
    }

  • fixed는 부모와 상관없이 뷰포트 안에서 동작

  • 기존 자기 자리에서 완전히 이탈해 뷰포트에 포지셔닝

[PHP] 관리자가 회원정보 확인하기
2021. 05. 12(수) TIL

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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