堆叠HTML元素的顺序

时间:2009-06-02 01:45:29

标签: javascript jquery html css

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

<script type="text/javascript">
    $(function() {
        $('.wrap').hover(function() {
            $(this).children('.front').stop().animate({ "top" : '300px'}, 900);   
        }, function() {
            $(this).children('.front').stop().animate({ "top" : '0'}, 700);       
        });
    });
</script>

<style type="text/css">

#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;
}
</style>
</head>

<body>
<div id="container">
    <div class="wrap">
        <img src="back.jpg" alt="image" />
        <img src="front.jpg" class="front" alt="image" />
     </div>
</div>
</body>
</html>

为什么front.jpg出现在back.jpg的顶部?是不是因为front.jpg是在back.jpg标签之后的标签中?

2 个答案:

答案 0 :(得分:4)

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

引用下面的MDC页面:

  

当没有元素具有z-index时,元素按此顺序堆叠(从下到上):

     
      
  1. 根元素的背景和边框
  2.   
  3. 正常流程中的后代阻塞,按外观顺序(以HTML格式)
  4.   
  5. 后代按照外观(以HTML格式)
  6. 定位元素   

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

答案 1 :(得分:0)

是的,这有点像侥幸...... z-index应该真的设置在两者上以确保。