html - z-index 属性是如何工作的?

标签 html css z-index

z-index 是如何工作的? 它对没有指定 position 的元素起作用吗? 它是否支持具有指定 position 的元素(即让它们位于顶部)?

数字必须是负数吗?

<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>

还是不行?所有正数(递增的值)都会以最后一个在顶部、中间在中间、第一个在底部结束吗?

最佳答案

允许负整数和正整数。

必须在元素上设置位置。

不过,在深入了解这些细节之前,让我从头开始解释 z-index

每个网页都由所谓的堆栈上下文组成。从字面上看,您可以将它们视为一堆元素。 z-index 属性确定每个堆栈中元素的顺序,z-index 越高越靠上。

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

The specs列出创建新堆叠上下文的所有实例。正如其他人所说,这包括明确定位的元素,并且很快将包括并非完全不透明的元素。

正如我之前所说,z-index 只有在您显式 设置元素的位置时才会生效。这意味着将其设置为 fixedabsoluterelative。我认为,最好通过示例来说明这一点。

In this example ,我们希望蓝色 div 位于灰色 div 之上,因为它有 z-index,对吧?但是,如您所见,它位于底部。当然,这是因为我们还没有设置它的位置。 Once we do that它显示如我们所料。 同样,您必须设置位置

规范还告诉我们负值也可以。话虽如此,您不需要使用负值。使用正整数也很好。元素的默认 z-index 值为 0。

郑重声明,w3schools 是出了名的不可靠学习资源。虽然它可以是一种快速方便的资源,但他们的信息存在很多差距,有时甚至是错误的信息。我建议您使用更可靠的来源,例如 Mozilla Developer Network , 还有 the specs themselves .

关于html - z-index 属性是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14391208/

相关文章:

JavaScript:第一次鼠标悬停后 z-index 不会改变

javascript - 如何使用 watir 访问以下元素。我总是出错

html - 创建垂直滚动表

php - 消息的Mysql数据库查询拉取未读消息的数量(带查询)

html - 按内容自动调整三列中第一列的宽度

jQuery 无限轮播 : Slide # 2 replaced by Slide # 3 on first iteration

css - 悬停时更改 z-index

jquery - Material 按钮波纹 z-index

javascript - 格式 <文本区域>

html - 在我的网站中加入 svg 矩形