Rab*_*ara 0 html css html5 css3
*{
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>