处理CSS中子原㊑素z

日期:2021-03-23 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

1.难题的出現

写了一个平铺的目录,在其中一些目录项具备hover出現的弹出来框。期待达到的总体目标是弹出来框呈现时,要把目录项內容遮住住,以确保弹出来框中容优先选择展现。

原素的构造大概以下:

<div class="list">
    <div class="unit">
        <div class="content">目录项1</div>
        <div class="hover">弹出来框1</div>
    </div>
     <div class="unit">
        <div class="content">目录项2</div>
    </div>
     <div class="unit">
        <div class="content">目录项3</div>
        <div class="hover">弹出来框3</div>
    </div>
</div>

一部分款式以下:

.unit{
    position: relative;
    z-index: 1;
}
.hover{
    position: absolute;
    z-index: 10;
}

具体实际效果以下:

目录项1的弹出来框尽管能够遮住住本身的內容,却没法遮住住目录项2的內容。

2.基本原理

看上去,弹出来框的z-index值是超过目录项父原素的z-index值(包含弟兄原素的),因此应当会把全部目录项的內容都遮住住才对。

可是,具体上,这儿我忽视了一个最基本的点。由于弹出来框是目录项的子原素,因此其z-index值的尺寸,只是跟弹出来框的弟兄原素比照才更有意义。而针对与父原素(目录项)內容的等级,应当看父原素的等级关联。

大家能够想像为,每个目录项,是一个平行面全球,一个平行面全球內部设定的z-index,仅有跟这一全球內部的其他內容较为起來才更有意义,你需要跟其他平行面全球去较为,那抱歉,这东西有次元抑制。假如另外一个平行面全球的等级比这个全球高,你自身的z-index设定的再高,那也是內部独霸王,再高就不容易超出另外一个全球的木地板高。

在上面的实例中,尽管全部的目录项z-index都设定以便1,可是依据出現次序,因为第二个目录项的等级关联会比第一个高,因而,目录项1的全部內容都是被目录项2遮住。

3.处理计划方案

现阶段能想起的处理计划方案便是将弹出来框和目录项设成平级(变成弟兄原素),让弹出来框的z-index值超过目录项的z-index,此外js手动式设定每个弹出来框的精准定位。

到此这篇有关处理CSS中子原素z-index与父原素弟兄连接点的等级难题的文章内容就详细介绍到这了,大量有关css z-index等级內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!