<!DOCTYPE html> <html> <head> <style> .left_scrollpan, .right_scrollpan { text-align: center; width: 200px; height: 50px; } .left_scrollpan { position: relative; color: #ffffff; top: 0; background: #1772e8; left: 20px; } .right_scrollpan { position: relative; top: 0; right: -50px; border: solid #1772e8; } </style> </head> <body> <h2>Element one</h2> <div class="left_scrollpan"> I am positioned relative with left:20px; </div> <h2>Element two</h2> <div class="right_scrollpan"> I am positioned relative with right:-50px; </div> </body> </html>