How do I get this div to show up above the top div

my firt post here , so please guide me with any errors I make and general culture with these forums.

please see below.

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

Please see attached fiddle .

This is a simple representation of the layout of a legacy project , the blue square represent a bootstrap datetimepicker that has been implemented.

how ever when it is selected , it ends up hiding the top part of the picker behind the top "RED" div.

the date pickers Z-index is "9999 !important" in the css. How do I get the blue box (date picker representation) to show above the red div (top div).

Solution

It is because of overflow-y: auto on the .outer element, combined with position: relative. The blue box gets cut off, because it goes out of the container. Vertical overflow needs to be visible on it to make this work.

Now you certainly need the position: relative, and I guess you need the overflow too. The solution is to put them on different elements, instead of one. position: relative should be outside.

One possible way is to put the overflow on .planner-table-green, so you can keep everything you need and it will still work:

.outer{
    position:relative;
}

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

Nothing to do with z-index, you do not need it here, the natural order should be fine.

_{I found the problem using the inspector of my web browser, systematically disabling CSS properties.}