栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

z-index属性实际上如何工作?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

z-index属性实际上如何工作?

允许使用负整数和正整数。

必须在元素上设置位置。

不过,在深入了解这些细节之前,让我

z-index
从头开始进行解释。

每个网页都由所谓的堆栈上下文组成。从字面上看,您可以将它们视为元素的堆栈。z-index属性确定每个堆栈中项目的顺序,其中较高的z-index放置在更上方。

所有页面均以根堆栈上下文开头,该上下文从根元素开始构建(如您所愿)。但是,可以通过多种方式创建更多的堆栈上下文。一种方法是绝对定位div;它的子级将处于新的堆叠环境中。

规范列出了创建新堆栈上下文的所有实例。正如其他人所说,这包括
明确 定位的元素,并且不久将包括并非完全不透明的元素。

就像我之前说的,

z-index
只有在您 明确
设置元素的位置后才能生效。这意味着将其设定为
fixed
absolute
relative
。我认为这是最好的例子。

在此示例中,我们期望蓝色div的z索引位于灰色的顶部,对吗?但是,正如您所看到的,它在底部。当然,这是因为我们尚未设定位置。一旦执行此操作,它就会按预期显示。
同样,您必须设置position

规范还告诉我们,负值是可以的。话虽如此,您 无需 使用负值。也可以使用正整数也很好。

z-index
元素的默认值为0。

据记录,w3schools是一个众所周知的不可靠的学习资源。尽管它可以是一种快速便捷的资源,但它们的信息仍然存在很多空白,有时甚至是错误的信息。我建议您使用更可靠的资源,例如Mozilla开发人员网络,以及规范本身



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/568406.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号