Clever Geek Handbook

How can I get this div to appear above the top div

my firt post here, so please direct me with any mistakes I make and the general culture with these forums.

see below.

http://jsfiddle.net/LGTp7/

<body>
    <div class="red">

    </div>
    <div class="outer">
        <div class="planner-table green">
            <div class="planner-row">
                <div class="planner-cell">
                    <div class="black"></div>
                </div>
            </div>
            <div class="planner-row">
                <div class="planner-cell">
                    <div class="blue"></div>
                </div>
            </div>
        </div>
    </div>
</body>

See the attached script.

This is a simple layout view of a legacy project that blue square

represents the boot file datetimepicker

that has been implemented.

however, when selected, it closes the top of the picker behind the top "RED" div

.

the date pickers Z-index is "9999 !important"

in css. How to get blue box

(date picker view) to show above red div

(top div).

+3


source to share


3 answers


It has to do with overflow-y: auto

the element .outer

merged with position: relative

. The blue box is clipped because it comes out of the container. The vertical overflow must be visible

on it to make this work.

Now you definitely need position: relative

, and I think you need overflow too. The solution is to place them on different elements, not one. position: relative

should be outside.

One possible way is overflow by .planner-table-green

, so you can keep whatever you want and it will still work:

.outer{
    position:relative;
}

.planner-table-green {
    overflow-y: auto;
}


Nothing to do with z-index

, you don't need it here, the natural order should be good.

I found the problem with my web browser inspector, systematically disabling CSS properties.

+2


source 


.outer {
   overflow: visible;
}


0


source


The blue will only stay in the parent divs it follows. You will need to change the position to fixed if you want it to ignore any of its branches. The red is in a div separate from the outer div, so you can't move it.

-1


source






More articles:


All Articles