对大小响应（不固定）的 2 个图像使用 CSS 绝对位置、相对位置和 z-index答案

【问题标题】：Using CSS position absolute, relative and z-index for 2 images which are responsive (not fixed) in size对大小响应（不固定）的 2 个图像使用 CSS 绝对位置、相对位置和 z-index
【发布时间】：2012-05-05 00:18:44
【问题描述】：

我正在尝试叠加 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-index 设置为 OK，但没有设置高度，下面的一切都令人绝望。

有解决办法吗？

【问题讨论】：

你能上传屏幕截图的问题吗？你在哪里遇到问题？
你想要这样的东西吗？ jsfiddle.net/pPQsg/3

标签： css responsive-design z-index

【解决方案1】：

使用以下技术：

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

参考文献

【讨论】：