资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何解决CSS中子元素z-index与父元素兄弟节点的层级问题-创新互联

这篇文章主要介绍了如何解决CSS中子元素z-index与父元素兄弟节点的层级问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联建站专注骨干网络服务器租用十多年,服务更有保障!服务器租用,遂宁联通机房 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

1.问题的出现

写了一个平铺的列表,其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时,要把列表项内容遮盖住,以保证弹出框内容优先展示。

元素的结构大致如下:


    
        列表项1
        弹出框1
    
              列表项2                    列表项3         弹出框3     

部分样式如下:

.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与父元素兄弟节点的层级问题-创新互联
网页链接:http://www.cdkjz.cn/article/dpehjc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220