具有相同z-index的绝对定位元素：哪个元素将位于顶部？ [英] Absolutely-positioned elements with the same z-index: which element will be on top?

问题描述

假设你在 DIV 中有几个图片，它们是重叠的，但是没有定义z-index的： p>

CSS

  img {
位置：绝对
 top：0px; 
 left：0px; 
 width：100px; 
 height：100px; 
} 
  

HTML

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

我注意到Safari和Chrome会显示最后一个元素最佳。这是标准行为吗？换句话说，是否可以相当安全地假设大多数浏览器会显示最后一个元素？

解决方案

是的，可以假设。根据 W3C ：

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




Let's say you have several images in a DIV which are absolutely positioned such that they overlap but with no z-index defined:

CSS

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

HTML

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

I've noticed that Safari and Chrome will display the last element on top. Is this standard behavior? In other words, is it relatively safe to assume that most browsers will display the last element on top?

解决方案

Yes, it's safe to assume. According to the W3C:

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

这篇关于具有相同z-index的绝对定位元素：哪个元素将位于顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！