图片浮动在模态上方，除非未为图片定义 z 索引

Question

我有一个模态定义如下：

<style>
                                        /* The Modal (background) */
                                        .modal {
                                            display: none; /* Hidden by default */
                                            position: fixed; /* Stay in place */
                                            z-index: 2147483647; /* Sit on top */
                                            padding-top: 70px; /* Location of the box */
                                            left: 0;
                                            top: 0;
                                            width: 100%; /* Full width */
                                            height: 100%; /* Full height */
                                            overflow: auto; /* Enable scroll if needed */
                                            background-color: rgb(0,0,0); /* Fallback color */
                                            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
                                        }
                                        /* Modal Content */
                                        .modal-content {
                                            background-color: #fefefe;
                                            margin: auto;
                                            padding: 20px;
                                            border: 4px solid #7FBE52;
                                            width: 80%;
                                        }
                                        .modal-content h1 {
                                             text-decoration: underline;
                                             text-decoration-color: #7FBE52;
                                        }
                                        /* The Close Button */
                                        .close {
                                            color: #aaaaaa;
                                            float: right;
                                            font-size: 28px;
                                            font-weight: bold;
                                        }
                                        .close:hover,
                                        .close:focus {
                                            color: #000;
                                            text-decoration: none;
                                            cursor: pointer;
                                        }
</style>
<div id="trainerModel10" class="modal" style="display: block;">
    <div class="modal-content">
        <span id="close" class="close">×</span>
        <div style="">
        </div>                              
    </div>
</div>

然后进一步进入页脚的页面，有一个图像一直位于模态上方。当根本没有为此图像设置 z 索引时，它会像模态后面一样放置。但是，当设置了所需的z索引时，它会一直浮动在模态的顶部。

    <style>
    .et_pb_column {
        margin-right: 0!important;
        width: 50%;
        margin: 0;
        z-index: 1;
        float: left;
        position: relative;
        background-position: center;
        background-size: cover;
        padding: 0;
        border: 0;
        outline: 0;
        background: 0 0;
        font-size: 100%;
        vertical-align: baseline;
    }

    </style>
<div class="et_pb_column et_pb_column_1_2">
    <img class="aligncenter size-full wp-image-1032" src=".." alt=".." width="459" height="204">
</div>

可以在此处找到该问题的示例页面：https://educatefit.co.uk/search-trainer/personal-trainers-finchley/单击其中一个配置文件"快速视图"以打开模态，然后向下滚动，以便页脚图片漂浮在模态上方。

为什么即使 z 指数设置小于模态，它仍然浮动在上面？

Answer 1

#map + div {
  z-index: 1;
}

会修复它。要了解原因，请阅读堆叠上下文。

简而言之，原理是：每个元素，当给定一个z-index时，它为包含堆叠上下文中该特定z-index的所有子元素创建一个堆叠上下文。所以在你的元素中，你可以在子元素上有 + 无限和 - 无限(理论上，在实践中有最小值和最大值(，它们都将放置在父堆叠上下文中其元素的z-index。

因此，如果我创建两个元素，一个带有z-index:1，另一个带有z-index:2，则任何 2 的子元素将显示在 1 的子元素之上，无论它们的z-index如何。他们的z-index只在他们的楼层重要，但他们在楼下一层。

因此，为了能够始终解决z-index问题，您需要在要排序的元素之间找到最接近的共同父元素，并为您想要的子元素提供比您想要的子元素更高的z-index。