Make one div float over another?

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;
}

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.

Tags:

Html

Css