저는 선생님이 적어주신 내용으로는 적용이 되지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="sticky.css">
</head>
<body style="background: grey; height: 3000px;">
<div class="grey">
<div class="image">
< img src="appletv.jpg" alt="애플티비">
</div>
<div style="clear: both"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae veritatis, vitae quisquam enim omnis doloribus, unde inventore totam est iure ad facere eum, deleniti deserunt vero quia minus. Dolorem, suscipit.
</div>
<div style="clear: both"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae veritatis, vitae quisquam enim omnis doloribus, unde inventore totam est iure ad facere eum, deleniti deserunt vero quia minus. Dolorem, suscipit.
</div>
<div style="clear: both"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae veritatis, vitae quisquam enim omnis doloribus, unde inventore totam est iure ad facere eum, deleniti deserunt vero quia minus. Dolorem, suscipit.
</div>
</div>
</body>
</html>
------------------------------------------------------
.grey {
background: lightgrey;
height: 2000px;
margin-top: 500px;
}
.text {
float: left;
width : 300px;
margin-top: 400px;
}
.image > img {
float: right;
width : 400px;
}
.image {
position: sticky;
top: 100px;
}
이렇게 주어야 width와 sticiky가 적용이 됩니다.
scroll 또한 viewport를 넘어가서 멈춥니다.
이런 문제 때문에 자주 힘들었는데, 각 컴퓨터 운영체제마다 달라서 이러는걸까요?
