Question

I am looking at a jQuery screencast (jQuery for Absolute Beginners: Day 8). It has this code:

$(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>

Why is it that front.jpg appears on top of back.jpg? Is it simply because front.jpg is in a tag that comes after back.jpg’s tag?

Answer 1

When z-index is omitted, following siblings are automatically on a higher layer than previous siblings. This is expected behaviour.

To quote from the MDC pages below:

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)

See: https://developer.mozilla.org/en/understanding_css_z-index and in particular, the first section, https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_without_z-index