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).

1

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.

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

0

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.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy