<div id="wrapper">
<div class="box blue">
Position static (default
</div>
<div class="box red relative">
Positioned relative - pushed 20px left and 50px from the top - moved to the back (z-index: -1)
</div>
<div class="box blue">
Position static (default)
</div>
<div class="box green absolute">
Positioned absolute - top, left, right, bottom refer to document (not wrapper) <br>Absolutely positioned element is taken out of the document flow
</div>
<div class="box yellow fixed">
Positioned fixed -Element will stay in the viewport when scrolling -similar to `absolute` but fixed to viewport
</div>
<div class="box blue">
Position static (default)
</div>
<div class="box purple sticky">
Positioned sticky - Element placed at normal position - then keeps 35px from top so it will stay in the viewport when scrolling down - similar to `relative` but stays in viewport once entered
</div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
</div>
#wrapper {
max-width: 700px;
margin: 0 auto;
border: 2px solid black;
padding: 1rem;
}
.box {
width: 350px;
height: 150px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.purple {
background-color: purple;
}
.relative {
position: relative;
left: 20px;
top: 50px;
z-index: -1;
}
.absolute {
position: absolute;
top: 0px; /* 0px distance to top of document */
left: 50vw; /* Pushed half the viewport width to the left */
}
.fixed {
/* Element fixed to the viewport when scrolling */
position: fixed;
bottom: 10px;
right: calc(50vw - 350px - 0.5rem);
}
.sticky {
position: sticky;
top: 35px;
margin-left: -2rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.