paul590 paul590 - 6 months ago 17
CSS Question

Position Div on top of a completely separate div

Hello I am trying to position a div on top of another div programmatically (javascript or css). The divs are completely separate meaning they look as follows:

<div class="bottom">
<img src="image"></img>
</div>
<div class="Top">
<img src="image2"></img>
</div>


I am new to javascript, css but mosty of the solutions I find are for separate divs inside a div which allows them to use zIndex. Please let me know if you would like me to provide more information regarding my question. Thank you for you help!!

Answer

The element positioned absolutely doesn't NEED the z-index property but it may help prevent conflicts down the road.

<style>
    .stack-wrapper { position: relative; }
    .bottom { position: static; z-index: 1; }
    .top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
</style>

<div class="stack-wrapper">
    <div class="bottom">
       <img src="image"></img>
    </div>
    <div class="top">
       <img src="image2"></img>
    </div>
</div>
Comments