设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 手机 数据
当前位置: 首页 > 服务器 > 系统 > 正文

CSS中的z-index属性基本使用教程(3)

发布时间:2020-03-17 09:48 所属栏目:52 来源:站长网
导读:.b{position:relative;margin:-70px0030px;background:#090;} .c{position:relative;margin:-70px0060px;background:#f00;} .d{position:absolute;z-index:99;height:50px;background:#090;} 你会发现虽然 a 的子元

.b{position:relative;margin:-70px 0 0 30px;background:#090;}   

.c{position:relative;margin:-70px 0 0 60px;background:#f00;}   

.d{position:absolute;z-index:99;height:50px;background:#090;}  

你会发现虽然 a 的子元素 d 将 z-index 定义为99,但 d 仍然无法遮住 b 和 c 元素,这是因为 a 创建了新的局部层叠上下文,d 元素无法超越父级。

需要注意的是,此时就算 a 元素变成了定位元素,也不能改变其会创建新局部层叠上下文的命运,因为他设置了 opacity:.8。

按照我们前文所说,如果 a 没有定义 opacity:.8 ,但却像 b 和 c 元素一样设置了 relative,那么其子元素 d 将可以覆盖 b 和 c,至于这个例子就不再奉上了,大家随便写个测试一下即可。

(编辑:ASP站长网)

网友评论
推荐文章
    热点阅读