CODEWITHSUNDEEP
htmlcss
Catalin
Catalin

Reputation: 11721

Make CSS popup always stay on top of it's parent

I have a two divs.

One with position relative, and another one with position absolute.

They act somehow as a popup button.

Is there any way of forcing the div with position: absolute to always stay on top of it's parent, no matter what height it has?

On top i mean "standing on top of it", not z-index property

jsFiddle example

<div style="position: relative; border: 1px solid #000; padding: 2px;">
    <span>Popup container</span>
    <div style="position: absolute;">
        <div style="height: 100px; background-color: #f0f0f0; top: 0;"></div>
    </div>
</div>

Upvotes: 0

Views: 2589

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Sizes are calculated based on the container not itself

So you need to give it a 

bottom:100%;

Demo at http://jsfiddle.net/gaby/Rhb3M/4/

Upvotes: 1

Kasyx
Kasyx

Reputation: 3200

If your popupParent has fixed height (for example 100px) then you can use bottom:

bottom: 100px;

Check updated fiddle: http://jsfiddle.net/Rhb3M/2/

Also remember about another values which you should add (paddings, margins, borders)

In Your case it will 105px (100px height + border + 2*padding)

Upvotes: 0

Related Questions