CSS bottom property example at PNLdev

Run
<!DOCTYPE html>
<html>
<head>
<style>
    div.parent {
    position: relative;
    height: 200px;
    border: 3px solid red;
}
    div.absolute {
    position: absolute;
    width: 50%;
    bottom: 10px;
    border: 3px solid #8AC007;
} 
    div.relative {
    position: relative;
    width: 50%;
    bottom: 5px;
    border: 3px solid #8AC007;
} 
    div.fixed {
    position: fixed;
    width: 50%;
    bottom: 10px;
    border: 3px solid #8AC007;
} 
    div.sticky {
    position: sticky;
    width: 50%;
    bottom: 10px;
    border: 3px solid #8AC007;
} 
</style>
</head>
<body>
    <h1>bottom property example</h1>
    <div class="parent">This div element has position: relative;
    <div class="absolute"><strong>position: absolute and bottom 10px</strong><br>This div's bottom edge is placed 10 pixels above the bottom edge of the containing element.</div>
    </div>
    <br>
    <div class="parent">This div element has position: relative;
    <div class="relative"><strong>position: relative and bottom 5px</strong><br>This div's bottom edge is placed 5 pixels above its normal position.</div>
    </div>
    <br>
    <div class="fixed"><strong>position: fixed and bottom 10px</strong><br>This div's bottom edge is placed 10 pixels from the bottom of the viewport.</div>
    <div class="parent">This div element has position: relative;
    <div class="sticky"><strong>position: sticky and bottom 10px</strong><br>This div is sticky.</div>
    </div>
</body>
</html>