加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 电商 > 正文

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

发布时间:2020-03-17 14:19:48 所属栏目:电商 来源:站长网
导读:副标题#e# CSS Code复制内容到剪贴板 z-index:auto|integer z-index 接受的属性值为:关键字auto和整数,整数可以是负值(Firefox2.0及之前不支持负值)。 需要注意的是 z-index 虽然很给力,却只能应用于定位元素(即设置了 position 属性为非 static 值)

.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,至于这个例子就不再奉上了,大家随便写个测试一下即可。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读