Geek Answers Handbook

Jquery css overlay div over another div?

I tried to find the overlay of the div over another, after which I recognized this

But that doesn't seem to work for me?

I just need something like:

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

Can you please give me a working demo?

+4
source share
4 answers

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

The only thing you need to understand is position: absolute; and top: 0; (or as far from the top of the page you want)

+9
source

The first answer seems good to me, but here is a link to the w3schools css page. Try It Yourself is a handy sandbox.

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

0
source

Here is another solution that may work in your particular case using a negative margin instad 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/

0
source

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 CSS position: absolute; for both of them. This page pretty well explains how to use the CSS position attribute in different ways to place divs pretty much, but you may like it.

EDIT: I edited the script with

 body{ padding:0px; }

To build them at the top, the window by default has some addition that affects everything that is not position: absolute;

-1
source

More articles:


All Articles