如何使 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-imagediv，覆盖news-contentdiv。

Answer 1

从这个问题来看，我建议您对父元素（即 news-content）使用 position:relative。然后在此处为子元素添加 position:absolute（即 news-image）。然后offset子元素margins按照上图定位。

Answer 2

这是一种方法：

利用relative定位在parent.
在child上使用absolute定位并调整位置。

.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>

Fiddle code

如何使 div 覆盖另一个 div

How to make a div overlaying another div

html

css

twitter-bootstrap

twitter-bootstrap-3