Order of stacked HTML elements

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?

This should really be tagged html, css. I'd also recommend you get a lot more familiar with html/css before delving into jquery, as it is generally used to manipulating the two. — Ryan Florence, Jun 02 '09 at 02:31

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

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):

Background and borders of the root element

Descendant blocks in the normal flow, in order of appearance (in HTML)

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

Could you please answer http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8 ? — LCJ, Mar 30 '12 at 13:19

score 0 · Answer 2 · answered Jun 02 '09 at 01:50

0

Yes, it's a bit of a fluke... z-index should really be set on both to make sure.

answered Jun 02 '09 at 01:50

singpolyma

10,999
5
47
71

Order of stacked HTML elements

2 Answers2