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> 
코딩 일기장