Make one div float over another?

Question

I have two div elements on a page. How can I make one div to float over another just like a popup? In other words, div2 (the popup) would cover some part of the area of div1 (the parent).

Answer 1

Use position:absolute; and set the "popup" one to be positioned within the boundaries of the other. The "popup" div should likely also be smaller.

Use z-index to stack the "popup" one above the other one (give it a higher value for z-index).

If you want to make it look like the inner div is really floating above the other one, create a shadow with something like border-right:2px solid black and border-bottom:2px solid black.

If you want to make it actually pop up/appear/disappear, you will need to use some script.

Answer 2

I believe setting the position to fixed will cause it to stay visible even if the user scrolls. You can set the position using "top", "left" and "right" attributes. The CSS I use for a "beta" logo which basically does what you are asking is this:

.fixed{     position:fixed;     top:0px;     right:0px;     width:100px; }