CODEWITHSUNDEEP
jquerycss
kritya
kritya

Reputation: 3362

jquery css overlay div over another div?

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 ?

Upvotes: 4

Views: 21065

Answers (4)

DwB
DwB

Reputation: 38300

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.

Upvotes: 0

Simeon
Simeon

Reputation: 5579

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/

Upvotes: 0

Artur Sapek
Artur Sapek

Reputation: 2497

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;

Upvotes: -1

Naftali
Naftali

Reputation: 146310

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)

Upvotes: 9

Related Questions