首页 文章

具有相同z-index的绝对定位元素：哪个元素将位于顶部？

提问于
浏览 次
4

假设你在_469888中有几个图像，这些图像绝对定位使得它们重叠但没有定义z-index：

CSS

img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

HTML

<div>
    <img src="...">
    <img src="...">
    <img src="...">
</div>

我注意到Safari和Chrome会在最上面显示最后一个元素 . 这是标准行为吗？换句话说，假设大多数浏览器将最后一个元素显示在顶部是否相对安全？

html css cross-browser z-index

3 回答

  • 0

    将显示浏览器读取的相同位置中的最后一个图像 . 是的，所有浏览器都是安全的选择，因为所有文件都是逐行读取的 .

    回复于
  • 1

    是的，可以安全地假设 . 根据 W3C ：

    每个框属于一个堆叠上下文 . 给定堆叠上下文中的每个定位框具有整数堆栈级别，这是其在z轴上相对于相同堆叠上下文中的其他堆栈级别的位置 . 具有更高堆栈级别的盒子总是在具有较低堆栈级别的盒子前面格式化 . 框可能具有负的堆栈级别 . 堆叠上下文中具有相同堆栈级别的框根据文档树顺序从后到前堆叠 .

    回复于
  • 8

    通常，最后激活的将在顶部 .

    div a is z-index 10, and appears first in the document

div b is z-index 10, and appears second in the document

    当文件呈现时b将在a之上，因为a是写的，然后b写在顶部 .

    修改一个可以把它放在首位 .

    基本上你应该在'a'上有一个点击处理程序来提升它，如果你需要一个出现在b的顶部 .

    回复于

相关问题