Question

我的第一篇文章，所以请指导我做出的任何错误以及这些论坛的一般文化。

请参阅下文。

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

请参阅随附的小提琴。

这是遗留项目布局的简单表示，blue square表示已实施的引导程序datetimepicker。

如果选择它，它最终将拾取器的顶部隐藏在顶部"RED" div后面。

css中的date pickers Z-index is "9999 !important"。如何将blue box（日期选择器表示）显示在red div（顶部div）上方。

Answer 1

这是因为overflow-y: auto元素上的.outer与position: relative相结合。蓝色的盒子被切断了，因为它从容器里出来了。垂直溢出需要visible才能使其正常工作。

现在你当然需要position: relative，我想你也需要溢出。解决方案是将它们放在不同的元素上，而不是一个元素上。 position: relative应该在外面。

一种可能的方法是将溢出放在.planner-table-green上，这样您就可以保留所需的一切，它仍然有用：

.outer{
    position:relative;
}

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

与z-index无关，你在这里不需要它，自然顺序应该没问题。

_{我使用网络浏览器的检查器发现了问题，系统地禁用了CSS属性。}

Answer 2

.outer {
   overflow: visible;
}

Answer 3

蓝色将仅保留在其后面的父div中。如果您希望忽略任何分支，则必须将位置更改为固定。红色位于与外部div分开的div中，这就是为什么你不能移动它。

如何让这个div显示在顶部div之上

3 个答案: