<html> <head> <style> /* STATIC - This is the default value for elements. The element is positioned according to the normal flow of the document. The left, right, top, bottom and z-index properties do not affect an element with position: static.*/ .main-element { position: static; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .sibling-element { padding: 10px; background-color: #f2f2f2; } </style> </head> <body> <div class="parent-element"> <div class="sibling-element"> I'm the other sibling element. </div> <div class="main-element"> All eyes on me. I am the main element. </div> <div class="sibling-element"> I'm the other sibling element. </div> </div> </body> <html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter