使用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个图像是响应（不固定）的大小

回答

相关问题