Question

我在我的容器中添加了一个图像，之后我创建了另一个div，它相互重叠我希望第二个div可见于容器div下面

这是html

<header>
    <div class="top_nav">

    </div>
</header>
    <div class="container">
    <img src="cover.jpg">
    <div id="short-des">

</div>
</div>
<div class="details">
</div>

CSS

*{
    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;

}

我希望div名称详细信息显示在容器div下方

Answer 1

这是解决方案（fiddle）：

＆＃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%;
    overflow: hidden;
    background-position: center;
    top: 0;
    z-index: -1;
}

.container img{
    width: 100%;
    height: 638px;
    display: block;
}

.details{
    height: 638px;
    width: 100%;
}

＆＃13;

<header>
    <div class="top_nav">
        top nav
    </div>
</header>
<div class="container">
    <img src="http://placehold.it/300x300">
    <div id="short-des">
       short descr
    </div>
</div>
<div class="details">
    details
</div>

＆＃13;

Answer 2

我想这就是你想要的fiddle

.container{
    height: 638px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-position: center;
    top: 0;
    z-index: -1;
}
.details{
    height: 638px;
    width: 100%;
    border:solid 1px red;
}

删除了位置：绝对属性

Answer 3

<header>
    <div class="container">
        <div class="top-nav">
        </div>
    </div>
</header>


<section class="section-one">
    <div class="continer">
        <div class="image-outer"><img src="your-image">
        </div>


        <div class="your-title">
        </div>
    </div>
</section>

Div与另一个Div重叠

3 个答案: