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.