<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="scroll">
<div class="static">
.static
</div>
<div class="sticky">
.sticky
</div>
<div class="fixed">
.fixed
</div>
</div>
<div class="scroll">
<div class="static">
.static
</div>
<div class="sticky">
.sticky
</div>
</div>
<div class="scroll">
</div>
</body>
div {
width: 800px;
height: 1000px;
border: black solid 5px;
margin: 30px;
display: inline-block;
color: white;
}
.scroll {
overflow:visible;
display: block;
}
.static {
width: 150px;
height: 150px;
border: none;
background: gray;
text-align: center;
line-height: 150px;
}
.sticky {
width: 150px;
height: 150px;
border: none;
background: blue;
text-align: center;
line-height: 150px;
position: sticky;
top: 50px;
}
.fixed {
width: 150px;
height: 150px;
border: none;
background: red;
text-align: center;
line-height: 150px;
position: fixed;
bottom: 150px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.