Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> div.parent { position: relative; height: 180px; border: 3px solid #8AC007; } div.absolute { position: absolute; width: 50%; bottom: 20px; border: 3px solid #8AC007; } div.relative { position: relative; width: 50%; bottom: 2px; border: 3px solid #8AC007; } div.fixed { position: fixed; width: 50%; bottom: 50px; border: 3px solid #8AC007; } div.sticky { position: sticky; width: 50%; bottom: 10px; border: 3px solid #8AC007; } </style> </head> <body> <h2>Bottom property example</h2> <div class="parent"> This div element has position: relative. <div class="absolute"><strong>position: absolute and bottom 20px</strong> <br>This div's bottom edge is placed 20 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 2px</strong> <br>This div's bottom edge is placed 2 pixels above its normal position.</div> </div> <br> <div class="fixed"><strong>position: fixed and bottom 50px</strong> <br>This div's bottom edge is placed 50 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>