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手动设置每一个弹出框的定位。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 廖也欧《面朝大海》[Hi-Res][24bit 48kHz][FLAC/分轨][170.14MB]
- s13T1夺冠五人名单都有谁 s13T1夺冠五人名单一览
- 英雄联盟T1战队队长都有谁 T1战队所有队长介绍
- skt历届战队成员都有哪些 skt历届战队成员名单盘点
- 妙音唱片《大热唱片3》[WAV+CUE]
- 费玉清《跟着地球旋转》滚石时代经典复刻[正版原抓WAV+CUE]
- 罗文甄妮-射雕英雄传(AMCD)(限量版)[WAV+CUE]
- 《巫师4》定档2025再添佐证:参演人员曝光 老将回归
- 辣眼睛 美女COS《黑神话:悟空》比基尼版金池长老
- 外媒称PS5pro违背承诺:《蜘蛛侠2》根本没法4K60帧
- 令晴 Lynn《The Make》[320K/MP3][44.47MB]
- 令晴 Lynn《The Make》[Hi-Res][24bit 48kHz][FLAC/分轨][295.42MB]
- 雷婷《移情别恋HQⅡ》头版限量编号[低速原抓WAV+CUE][1G]
- FUNDAMENTAL.1989-感觉号渡轮【SONY】【WAV+CUE】
- 上山安娜.1986-上山安娜【EMI百代】【WAV+CUE】