[CSS] position : sticky

qwe8851·2022년 6월 20일
0

💐 CSS

목록 보기
2/17

position : sticky는 스크롤 시 화면에 고정되는 요소를 만들 수 있는 css 속성.

position : fixed는 항상 화면에 고정되는 요소를 만들때 사용하는데 이 둘이 무슨 차이가 있냐면,
position : sticky는 스크롤이 되어시 이 요소가 화면에 나오면 고정시킨다는 특징이 있음

<body style = "background : gray; height : 3000px;>

<div class = "gray">
    <div class = "image>
		<img src = "~~img.jpg" width = "100%">
	</div>

	<div style = "clear : both"></div>
	<div class = "text"> text~~~~~~~~~~</div>

</div>

</body>
.gray {
  background: lightgrey;
  height: 2000px;
  margin-top: 500px;
}
.text {
  float: left;
  width : 300px;
}
.image {
  float: right;
  width : 400px;
  position: sticky;
  top: 100px;
}

이렇게 작성하면 검고 긴 화면과 그 안에
텍스트와 이미지가 하나씩 보이는데

이미지에 position : sticky를 주면
1. 스크롤이 되면서 이미지가 보이는 순간!
2. viewport의 맨 위에서부터 100px 위치에서 고정
3. 부모 박스를 넘어서 스크롤 되면 이미지도 같이 사라짐.

❗주의점
1. 스크롤을 할 만한 부모 박스가 있어야 하고
2. top 등 좌표속성과 함께 써야 제대로 보임.




# Summary

position : sticky

스크롤 시 화면에 고정되는 요소 만들기

position : fixed와 차이점

fixed는 항상 화면에 고정할 요소를 만듦
sticky는 이 요소가 화면에 나오면 고정
+) 좌표 속성이랑 같이 써야 함

profile
FrontEnd Developer with React, TypeScript

0개의 댓글