<html> <head> <style> /* Relative - Elements with position: relative remain in the normal flow of the document. But, unlike static elements, the left, right, top, bottom and z-index properties affect the position of the element. An offset, based on the values of left, right, top and bottom properties, is applied to the element relative to itself. */ .main-element { position: relative; 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