position : sticky

Front-end/CSS

by 본투비곰손 2023. 6. 14. 22:46

728x90

position : sticky

위속성을 적용한 박스는 원래 위치에 있다가 정해진 위치가 되면 position:fiixed 되어진것 처럼 표현된다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				height: 10000px;
			}
			.box {
				width: 200px;
				height: 200px;
				background-color: red;
				font-size: 20px;
				color: white;
				text-align: right;
			}
			.box1 {
				position: fixed;
				top: 0;
				left: 300px;
				z-index: 1000;
			}
			.box2 {
				position: sticky;
				top: 200px;
				width: 100px;
				height: 100px;
				background-color: blue;
			}
			.box3 {
				background-color: green;
			}
			.box4 {
				position: absolute;
				height: 1000px;
				top: 800px;
				left: 300px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="box box1">fixed</div>
		<div class="box box4">
			absolute
			<div class="box2">sticky</div>
		</div>
		<div class="box box3">static</div>
	</body>
</html>

position의 모든 속성을 볼 수 있는데 static 은 그자리에 있고(다른요소를 방해한다.)

fixed는 항상 그자리에 위치하며 absolute는 따로 떨어져 다른 요소에 방해되지 않고 고정 되어 있다.

sticky는 일반적으로 자기위치에 있는 absolute와 같다고 할 수 있지만 정해놓은 값에 따라 fixed 처럼 나타난다.

위의 파란색 박스 (class="box2")는 스크롤하여 화면에서 봤을때 top:200px가 되면 fixed처럼 고정되어 움직인다.

하지만 이는 검은색 박스 (class="box4")안에서만 가능하고 그영역을 벗어나지 못한다.

정상적으로 값을 주었으나 안될경우 부모의 크기(width 또는 height)를 확인해보면 된다.

728x90

'Front-end > CSS' 카테고리의 다른 글

grid (0)	2023.06.15
flexbox (0)	2023.06.14
pointer-event (0)	2023.06.14
말줄임표 (영역에서 텍스트넘칠때 ...으로 줄이기) (0)	2023.06.12
appearance (0)	2023.06.12