<!DOCTYPE HTML> <html> <head> <style> div { border:1px solid green; margin:5px; height:100px; } </style> </head> <div><span style="position:absolute; left:0">1<img src="square-outline-32x32.png">"Before gen abs</span >Inner<span style="position:absolute; right:0">2<img src="square-outline-32x32.png">After gen abs"</span ></div> <div style="position:relative"><span style="position:absolute; left:0">1<img src="square-outline-32x32.png">"Before gen abs</span >Inner<span style="position:absolute; right:0">2<img src="square-outline-32x32.png">After gen abs"</span ></div> <div><span style="position:relative; top:-10px;">1<img src="square-outline-32x32.png">"Before gen rel</span >Inner<span style="position:relative; top:10px;">2<img src="square-outline-32x32.png">After gen rel"</span ></div> <div>Begin <span style="position:relative; top:-10px;">1<img src="square-outline-32x32.png">"Before gen rel</span >Inner<span style="position:relative; top:10px;">2<img src="square-outline-32x32.png">After gen rel"</span > End</div> </body> </html>