html - Positioning an element on top of two other elements -

html - Positioning an element on top of two other elements -

i have element background element , need add together invisible spacers turn background in buttons (because foreground image needs on top) need in way corresponds wrapper , hence cannot create utilize of position function, how else can this?

thanks in advance!

<style> #wrapper { width: 1100px; padding: 10px; margin: 0 auto; } #wrapper div { display: inline-block; } #wrapper ul { list-style-type: none; } #wrapper li { display: inline-block; } #socialnetwork { background: url('snetwork.png') no-repeat; position: relative; } </style> <div id="wrapper"> <ul> <li id="socialnetwork"><img src="money.gif" style="background: url('snetwork.gif') 0 0 no-repeat;" /></li></li> </ul> <div id="overlay"> <a href="#facebook"><img src="snfiller.png" style="position: fixed; left: 560px;"> </a><br /> <a href="#youtube" ><img src="snfiller.png"></a><br /> <a href="#twitter"><img src="snfiller.png"></a> </div> </div>

edit: had them in tag adapted stack overflow, msitake not in code.

html css