使用html和css覆蓋兩個圖像，如果我嘗試任何其他覆蓋他們是衝突？

我已經疊加兩個圖像成功，但在這裏，如果我用同樣的事，其他分區的圖像正在逐漸衝突是的jsfiddle代碼.. https://jsfiddle.net/cLew1t2v/這裏是代碼使用html和css覆蓋兩個圖像，如果我嘗試任何其他覆蓋他們是衝突？

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

來源

2016-11-16 john

我想並排放置兩個疊加的圖像，但是我可以看到它們一個在另一個之上，一旦可以檢查我的jsfiddle進行實況演示 – john

爲什麼使用絕對位置？有什麼目的嗎？ –

來定位它相對於以前定位div – john

由於內部DIV所有選擇與position: relative是絕對定位其高度爲0.

您可以將寬度和高度設置爲相對框，並且如果您希望具有內聯元素，則也可以浮動。

.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>

來源

2016-11-16 11:52:20 Kuba

這裏是另一種解決方案：

.cont { 
 
    position: relative; 
 
    float: left; 
 
}

<div class="cont"> 
 
      <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="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 class="cont"> 
 
      <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="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>

只要.cont國產浮動離開，它會創建一個新的塊格式化上下文，所以第一個孩子它將位於容器的左上角，a你不能特別定義第一個孩子的位置。

來源

2016-11-16 11:57:45 Banzay

使用html和css覆蓋兩個圖像，如果我嘗試任何其他覆蓋他們是衝突？

回答

相關問題