堆叠的 HTML 元素的顺序

Question

我正在看一个 jQuery 截屏视频 (jQuery for Absolute Beginners: Day 8)。它有这个代码：

$(function() {
  $('.wrap').hover(function() {
    $(this).children('.front').stop().animate({
      "top": '300px'
    }, 900);
  }, function() {
    $(this).children('.front').stop().animate({
      "top": '0'
    }, 700);
  });
});

#container {
  width: 850px;
  text-align: center;
  margin: auto;
}

.wrap {
  width: 250px;
  height: 140px;
  position: relative;
  overflow: hidden;
  padding: 0 1em;
}

img {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="wrap">
    <img src="back.jpg" alt="image" />
    <img src="front.jpg" class="front" alt="image" />
  </div>
</div>

为什么front.jpg出现在back.jpg之上？是不是因为front.jpg在back.jpg标签后面的标签中？

Answer 1

当省略 z-index 时，后面的兄弟姐妹会自动位于比之前的兄弟姐妹更高的层上。这是预期的行为。

引用下面的 MDC 页面：

当没有元素具有 z-index 时，元素按此顺序堆叠（从下到上）：

1. 根元素的背景和边框
2. 正常流程中的后代块，按出现顺序（在 HTML 中）
3. 后代定位元素，按出现顺序（在 HTML 中）

请参阅：https://developer.mozilla.org/en/understanding_css_z-index，尤其是第一部分，https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_without_z-index

Answer 2

是的，这有点侥幸……确实应该在两者上都设置 z-index 以确保。