Lay div elements on top of each other

Question

I have a website where the layout looks something like this: (image below)

In the left pane, I have a div that displays the logo. I have another div that I want to put under the logo, and so the divs must be stacked on top of each other. I tried playing with z-indexes, but did not quite understand. How can I do that?

Answer 1

Try also using position: absolute; instead of relative for both elements when using the z-index. It can then do some distortion in your layout, so you can put the div div in another relative div or use some other method to fix it, however it should work when using absolute position and z-index. If it still doesn't work, check to see if any of your javascript or any other elements in your code have a z-index, so it causes problems.

If absolute position is used, be sure to define margin-left and margin-top .

Answer 2

If the z-index does not work, try inserting the <div> logo into the <div> wrapper something like this

 <div> <!--div container to hold the logo div--> <div><!--Logo div--></div> </div> 

Answer 3

Link: jsFiddle Logo Demo

Status update: jsFiddle Logo Demo Just Border Version

The above jsFiddle has extensive notes in the CSS section so you can understand how to customize your logo.

HTML:

 <div id="logoHolder"> <div id="logoContent"> <div id="logoImage"></div> </div> </div> 

CSS

 #logoHolder { width: 296px; height: 296px; background-color: white; border: 3px solid red; } #logoContent { width: 256px; height: 256px; padding: 20px; position: relative; border: 1px solid black; } #logoImage { background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png); background-repeat: no-repeat; background-position: center center; background-color: aqua; height: 100%; } 

Answer 4

I'm not sure what you want to achieve, but try this by adapting the values ​​to your layout.

Answer 5

Try using the margin property as shown in the image. If you put margin-left as a negative value for the div on the right, then the right div will move below / above the div logo.