javascript - 堆叠 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 页面:

When no element has a z-index, elements are stacked in this order (from bottom to top):

1. Background and borders of the root element
2. Descendant blocks in the normal flow, in order of appearance (in HTML)
3. Descendant positioned elements, in order of appearance (in HTML)

参见:https://developer.mozilla.org/en/understanding_css_z-index特别是第一部分，https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_without_z-index