使用CSS位置絕對，相對和z-index的2個圖像是響應（不固定）的大小

我想疊加2個圖像，但他們都需要在高度和大小響應（即父DIV不是一個固定的大小（具體而言在縮略圖上的播放按鈕）。使用CSS位置絕對，相對和z-index的2個圖像是響應（不固定）的大小

實施例...

<div class="img-wrap"> 
    <div class="play-button">Play Button Img</div> 
    <div class="thumb-image">Thumbnail Video Image</div> 
</div>

通常我會設置上的.img纏繞高度，寬度和位置相對，然後設定位置絕對和z .play-button和.thumb-image的索引允許播放按鈕圖像很好地坐在縮略圖上。

我遇到的問題是縮略圖很敏感，所以我無法設置.img-wrap的高度和寬度。我仍然可以設定他的Z指數確定，但沒有設置高度，下面的所有內容都是絕望的。

是否有修復？

謝謝 - 傑克

來源

2012-04-24 Jack Barham

你可以用屏幕截圖上傳問題嗎？你在哪裏得到問題？ – 2012-04-24 11:10:16

你想要這樣的東西？ http://jsfiddle.net/pPQsg/3/ – 2012-04-24 12:40:17

使用以下技術：

<!doctype html> 
<html> 
<head> 
<title>Responsive Nested Images</title> 
<meta charset="utf-8"> 
</head> 
<style> 
    .play-button, .thumb-image 
     { 
     position: absolute; /* Absolutely position both containers */ 
     font-size:0; /* Hide text */ 
     line-height:0; 
     } 
    .play-button { outline: 1px solid red; } /* Add outline for debugging */ 
    .thumb-image { top:50%; left: 50%; outline: 1px solid green; } /* Responsive Container */ 
    .play-button img, .thumg-image img { max-width: 100%; height: auto; } /* Responsive Image Dimensions */ 
</style> 
</head> 
<body> 
    <div class="play-button"><img src="http://www.stackoverflow.com/favicon.ico"> 
     <div class="thumb-image">Thumbnail Video Image<img src="http://www.stackoverflow.com/favicon.ico"></div> 
     Play Button Img 
    </div> 
</body> 
</html>

參考

來源

2013-11-27 01:48:17

使用CSS位置絕對，相對和z-index的2個圖像是響應（不固定）的大小

回答

相關問題