我正在尝试叠加2张图片，但是它们都需要在高度和大小上做出响应（即，父DIV不是固定大小（具体是缩略图上的播放按钮））。
例...
<div class="img-wrap">
<div class="play-button">Play Button Img</div>
<div class="thumb-image">Thumbnail Video Image</div>
</div>
通常，我会在.img-wrap上设置相对的高度，宽度和位置，然后设置.play-button和.thumb-image的位置绝对值和z-index，以使播放按钮图像恰好位于缩略图上方。
我的问题是缩略图是响应式的，因此我无法设置.img-wrap的高度和宽度。我仍然可以设置z索引为OK，但如果不设置高度，则下面的所有内容都会令人失望。
有没有解决的办法？
最佳答案
使用以下技术：
<!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>
参考文献
Fit-and-shrink technique
PlayBox: Vertical and Horizontally Centered Modal
关于css - 使用CSS位置的绝对值，相对值和z-index用于2张响应大小(不固定)的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10296611/