html - 如果我尝试使用 html 和 css 叠加两个图像，它们是否有冲突？

Question

我已经成功地叠加了两个图像，但是如果我对其他 div 图像使用相同的东西，我会在这里发生冲突，这是 jsfiddle 代码。 https://jsfiddle.net/cLew1t2v/这是代码

<div >
    <div style="position:relative;">
         <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1; ">
         <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

    </div>
</div>
 <div >
      <div  style="position:relative;">
         <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1; ">
         <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

    </div>

</div>

Answer 1

因为 div 中所有带有 position: relative 的选择器都是绝对定位的，所以它的高度是 0。

你可以设置相对框的宽度和高度，如果你想要内联元素也可以 float 。

.relative-box{
  position:relative; 
  height: 350px; 
  width: 320px; 
  float: left;
  margin: 0 10px;
}

        <div class="relative-box">
             <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg">
             <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">
          
        </div>

          <div class="relative-box">
             <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" >
             <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">
            
        </div>