*{
margin: 0;
padding: 0;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.container #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: relative;
} <div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>我希望 short-des div 在中心的图像上可见 我尝试了 z-index 但它不起作用。请帮我合理地解决这个问题，这样我以后就会接受这些东西
最佳答案
把你的div定位到absolute重叠你的形象。使用 left/top/right/bottom属性来设置它的位置。
它的位置将相对于最近的非静态(绝对/相对/固定)定位元素或<body>
#short-des,
#short-des2 {
position: absolute;
left: 90px;
top: 50px;
width: 50px;
height: 50px;
background-color: rgba(100, 250, 100, .6);
z-index: 7;
}
#short-des2 {
z-index: 8;
left: 100px;
top: 55px;
background-color: rgba(250, 100, 100, .7);
}
.wrapper {
margin: 50px;
position: relative;
}<div class="wrapper">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<div id="short-des"></div>
<div id="short-des2"></div>
</div>关于html - 如何在图像上显示可见的 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40013441/