2022 04 25 CSS

hongwr·2022년 4월 25일
0

CSS

목록 보기
7/12
post-thumbnail

CSS

sticky

sticky는 부모 안에서 포지션이 지정이 된다.
스크롤을 내리면 지정된 위치에서 고정이 된다.
다른 것들에는 영향을 주지 않는다.

fixed

부모와 상관없이 지정된 위치로 이동한다.

sticky와 fixed의 차이

sticky는 있던 그 자리에서 스크롤링이 고정
fixed는 기존에 문서에서 나와서 포지션이 결정

똑같이 스크롤링에도 고정이 된다.

<style>
      .container {
        position: relative;
        top: 100px;
        left: 100px;
        background-color: beige;
      }

      .box {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        background-color: chocolate;
      }

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

      .box3 {
        background-color: blue;
        position: fixed;
        top: 20px;
        left: 20px;
      }
    </style>
  </head>
  <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>

profile
코딩 일기장

0개의 댓글