如何使一个div覆盖另一个div

Question

我正在使用 Bootstrap 3，我想做这样的一行：

所以这就是我的尝试：

<div class="news-section">  
    <div class="row">
        <div class="col-md-6 news-card">
            <div class="news-content">
                <div class="news-para">
                    Lorem ipsum ... 
                </div>
                <div class="news-image">

                </div>
            </div>
        </div>  
        <div class="col-md-6 news-card">
            <div class="news-content">
                <div class="news-para">
                    Lorem ipsum ...
                </div>
                <div class="news-image">
                
                </div>
            </div>
        </div>
    </div>
</div>              

但我真的不知道如何使包含image的news-image div 覆盖news-content div。

所以如果你能帮我解决这个问题，我将不胜感激......

提前致谢。

Answer 1

这是一种方法：

• 在parent上使用relative定位。

• 对child使用absolute定位并调整 position。

 .parent { position: relative; width: 250px; height: 100px; background: #dbdbdb; }.child { position: absolute; height: 120px; width: 120px; background: #fff; border-radius: 6px; border: 1px solid #000; left: 10px; top: -10px; }.text { position: absolute; left: 135px; top: 50%; transform: translateY(-50%) }

 <div class="parent"> <img src="https://i.picsum.photos/id/995/536/354.jpg?hmac=kARkIcQD-5FYzmRwd89uPn6yxoJvaCg43bkO-kABGGE" alt="" class="child"> <span class="text">Lorem text</span> </div>

小提琴代码

Answer 2

从这个问题来看，我可以建议您使用position:relative作为父元素（即news-content ）。 然后在此处为子元素添加position:absolute （即news-image ）。 之后根据上图将带有边距的子元素偏移到 position 它们。