<div class="example">
<span class="box">box</span>
<span class="box static">static</span>
<span class="box">box</span>
</div>
<div class="example">
<span class="box">box</span>
<span class="box relative">relative</span>
<span class="box">box</span>
</div>
<div class="example">
<span class="box">box</span>
<span class="box absolute">Absolute</span>
<span class="box">box</span>
</div>
<div class="example">
<span class="box">box</span>
<span class="box fixed">Fixed</span>
<span class="box">box</span>
</div>
<div class="box sticky">Sticky</div>
<div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div><div>Just to show Sticky!</div>
.example {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
.box {
margin: 20px;
width: 150px;
height: 50px;
background: linear-gradient(to right, #232526, #414345); /* Chrome 10-25, Safari 5.1-6 */
color: white;
text-align: center;
}
.relative {
position: relative;
right: 30px;
left: 30px;
top: 10px;
bottom: 20px;
}
.absolute {
position: absolute;
left: 5%;
top: 200;
}
.fixed {
position: fixed;
top:0;
right: 10%;
}
.sticky {
left: 20%;
top: 0;
position: -webkit-sticky;
position: sticky;
align-self: flex-start;
margin: 20px;
width: 150px;
height: 50px;
background: linear-gradient(to right, #232526, #414345); /* Chrome 10-25, Safari 5.1-6 */
color: white;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.