代码之家 › 专栏 › 技术社区 › DevWithZachary

除非没有为图片定义Z索引,否则图片在模式上方浮动

css html

DevWithZachary · 技术社区 · 6 年前

我有一个如下定义的模式:

<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-index,它就会像在模式后面那样放置。但是,当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索引的设置小于它仍然浮在上面的模式,为什么会这样呢?

1 回复 | 直到 6 年前

tao 6 年前

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

会修好的。要了解原因,请阅读有关堆叠上下文的内容。

简而言之,原则是:当给定一个 z-index ,它为包含堆栈上下文的所有子代创建一个堆栈上下文。因此,在元素内部,子元素可以有+无穷大和-无穷大(理论上,在实践中有一个最小值和最大值),它们都将被放置在父级堆栈上下文中其元素的 z-index

所以如果我创建两个元素,一个 z-index:1 另一个和 z-index:2 ,2的任何子级都将显示在1的子级之上,而不管它们的 z-index>他们的 z-index only matters on their floor ,but they are one floor below.

因此,要始终能够解决 z-index issues,您需要在要订购的元素之间找到最接近的公共父元素,并在顶部给您想要的子元素a更高 z-index than the child you want below.