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 ?

What CSS have you tried? That example is pretty basic and should work for what you want. — Seth, Aug 10 '11 at 19:16
When i tried to make the overlay div it either goes up or down — kritya, Aug 10 '11 at 19:18

score 9 · Accepted Answer · answered Aug 10 '11 at 19:16

9

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)

answered Aug 10 '11 at 19:16

Naftali

144,921
39
244
303

Doesnt the overlay div goes a bit up ? – kritya Aug 10 '11 at 19:17
@kritya -- thats only because the css has not been reset. one minute – Naftali Aug 10 '11 at 19:21
@kritya -- check the fiddle now (jsfiddle applied some default padding which i removed) – Naftali Aug 10 '11 at 19:22
@This should do it for you: http://jsfiddle.net/nupul/J9bjm/12/ The reason it goes up is because `position:absolute; top:0` positions it from the top of the window. If the overlay div were child of a relatively positioned div it would be 0px from the top of that div. That's why you sometimes need to explicitly play with the math. I've moved it `top:-62px` = 50px for height, (5 * 2)px for padding and (1 *2) px for the borders – PhD Aug 10 '11 at 19:25
@Nupul -- no math needed. jsfiddle had some default padding which i removed. – Naftali Aug 10 '11 at 19:25
...and Neal just showed it by adjusting body's padding/margin :) another way – PhD Aug 10 '11 at 19:26
@Nupul -- it is default for jsfiddle – Naftali Aug 10 '11 at 19:27

DwB · Answer 2 · 2011-08-10T20:26:49.713

0

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.

edited Aug 10 '11 at 20:26

answered Aug 10 '11 at 19:19

DwB

37,124
11
56
82

@neal LOL this site. How do u reach there ? – kritya Aug 10 '11 at 19:34

score 0 · Answer 3 · answered Aug 10 '11 at 19:28

0

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/

answered Aug 10 '11 at 19:28

Simeon

5,519
3
29
51

margins? why not use `position`? – Naftali Aug 10 '11 at 19:33
My answer could be useful because if the questioner is trying to overlap one single `
` over another, using `margin` instead of `position` can be a simpler solution (depending on the implementation, which we know nothing about)
– Simeon Aug 11 '11 at 11:23

score -1 · Answer 4 · answered Aug 10 '11 at 19:18

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;

jquery css overlay div over another div?

4 Answers4