Make One Div Float over Another?
I Have Two Div Elements on a Page. How Can I Make One Div Float over Another Just Like a Popup? in Other Words, Div2 (The Popup) Would Cover Some Part of the...
I have two div elements on a page. How can I make one div float over another just like a popup? In other words, div2 (the popup) would cover some part of the area of div1 (the parent).
3 Answers
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.
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;
}
Then use z-index property of css like this :
div1 {
z-index:1000;
}
div2 {
z-index:1001;
}
Highest z-index element will be display at top.
Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.
