jquery css overlay div over another div?

Question

I tried to find to overlay a div over another then i found out this

But this doesnt seems to works for me?

I just want it something like:

<div>The div below</div>
<div>OverLay div</div>

Can u please give me a working demo?

Answer 1

Here is a fiddle for you: http://jsfiddle.net/maniator/J9bjm/

The only thing you need to grasp from it is the position: absolute; and the top: 0; (or however far away from the top of the page that you want it)

Answer 2

The first answer seems good to me, but here is a link to the w3schools css position page. The "try it yourself" is a convenient sandbox.

Edit: as noted in the comment, w3schools is not a good reference. I marked the link with strikethrough, but left it live.

Answer 3

Here's another solution that might work in your particular case, using negative margin instad of position:

<div id="one">One</div>
<div id="two">Two</div>

#one, #two, #three, #four {
    background: #ddd;
    height: 100px;
    width: 100px;
}
#two {
    background: #aaa;
    margin-left: 10px; /* Set to 0 for complete overlap */
    margin-top: -80px; /* Set to -100 for complete overlap */
}

http://jsfiddle.net/xatpf/

Answer 4

Depending on the structure of your HTML, you probably don't even need jquery to do this. If you know exactly where you want them to be in the window you can use the position: absolute; CSS on them both. This page explains pretty well how to use the position CSS attribute in different ways to position divs pretty much however you may like.

EDIT: I edited the fiddle with

body{
padding:0px;
}

To make them line up at the top, the window by default has some padding which affects anything that's not on position: absolute;