Question

我创建一个菜单栏并使其透明，我在我的容器div中添加一个图像，以便在此之后查看菜单后面的图像，当我创建另一个div时它相互重叠我希望第二个div可见于容器div下面

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.top_nav {
  height: 80px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  position: relative;
}
.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;
}
.details {
  height: 638px;
  width: 100%;
  position: absolute;
}

＆＃13;

<header>
  <div class="top_nav"></div>
</header>
<div class="container">
  <img src="http://www.100resilientcities.org/page/-/100rc/img/blog/rsz_resilientcity_headphoto.jpg">
  <div id="short-des"></div>
</div>
<div class="details"></div>

＆＃13;

我希望div名称详细信息显示在容器div图像下方 enter image description here

Answer 1

请勿在{{1}}上使用position:absolute，但请在container上使用header。因此header将保留在container之上，details将保留在容器

之下

请参阅下面的代码段或小提琴＆gt; jsfiddle

让我知道是否有帮助

＆＃13;

*{
    margin: 0;
    padding: 0;
}

header { 
 position:absolute;
  z-index:100;
  width:100%;
  height:80px
 }
.top_nav{
    height: 80px;
    width: 100%;
    background: rgba(0,0,0,.5);
    position: relative;
}

.container{
    height: 638px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-position: center;
    top: 0;
    z-index: -1;
}

.container img{
    width: 100%;
    height: 638px;
}

.details{
    height: 638px;
    width: 100%;
    position: absolute;
    background:red;

}

＆＃13;

<header>
    <div class="top_nav">

    </div>
</header>
    <div class="container">
    <img src="http://placehold.it/350x150">
    <div id="short-des">

</div>
</div>
<div class="details">
</div>

＆＃13;

Div与另一个Div重叠与图像

1 个答案: