Html 图片浮动在模式上方,除非未为图片定义z索引
我的模态定义如下:Html 图片浮动在模式上方,除非未为图片定义z索引,html,css,Html,Css,我的模态定义如下: <style> /* The Modal (background) */ .modal { display: none; /* Hidden by default */
<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>
可以在这里找到该问题的示例页面:单击其中一个配置文件快速查看打开模式,然后向下滚动,使页脚图片浮在模式上方
为什么即使z-指数设置为小于其上面浮动的模式
#map + div {
z-index: 1;
}
我会修好的。要了解原因,请阅读有关堆叠上下文的内容
简而言之,其原理是:当给定一个z索引时,每个元素都会在包含堆栈上下文的特定z索引处为其所有子元素创建一个堆栈上下文。因此,在元素内部,理论上可以在子元素上有+infinite和-infinite,实际上有一个min和max,它们都将被放置在父堆栈上下文中元素的z索引处
因此,如果我创建两个元素,一个是z-index:1,另一个是z-index:2,那么2的任何子元素都将显示在1的子元素之上,而不管它们的z-index如何。他们的z指数只在他们所在的楼层起作用,但他们比他们低一层
因此,为了能够始终解决z索引问题,您需要在要排序的元素之间找到最接近的公共父元素,并为顶部的子元素提供比下面的子元素更高的z索引
我会修好的。要了解原因,请阅读有关堆叠上下文的内容
简而言之,其原理是:当给定一个z索引时,每个元素都会在包含堆栈上下文的特定z索引处为其所有子元素创建一个堆栈上下文。因此,在元素内部,理论上可以在子元素上有+infinite和-infinite,实际上有一个min和max,它们都将被放置在父堆栈上下文中元素的z索引处
因此,如果我创建两个元素,一个是z-index:1,另一个是z-index:2,那么2的任何子元素都将显示在1的子元素之上,而不管它们的z-index如何。他们的z指数只在他们所在的楼层起作用,但他们比他们低一层
因此,为了能够始终解决z索引问题,您需要在要排序的元素之间找到最接近的公共父元素,并为顶部的子元素提供比下面的子元素更高的z索引