Fatal编程技术网
  • css/
  • 使用CSS绝对位置、相对位置和z索引处理2个大小响应（不固定）的图像

使用CSS绝对位置、相对位置和z索引处理2个大小响应（不固定）的图像

css responsive-design

使用CSS绝对位置、相对位置和z索引处理2个大小响应（不固定）的图像,css,responsive-design,z-index,Css,Responsive Design,Z Index,我试图覆盖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上设置高度、

我试图覆盖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按钮和.thumb图像的绝对位置和z索引，以使play按钮图像能够很好地位于缩略图上

我遇到的问题是缩略图响应迅速，因此我无法设置.img wrap的高度和宽度。我仍然可以设置z指数，但没有设置高度，下面的一切都是绝望的

是否对此进行了修复？

使用以下技术：

<!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>
参考资料

你能用屏幕截图上传问题吗？你从哪里来的问题？你想要这样的东西吗？