Question

我正在尝试设计id="text-field"的某些文字与id="image-field"重叠的设计。我不知道该怎么做，谢谢你的帮助。

<!DOCTYPE html>
<html>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6" id="text-field"> Some text </div>
                <div class="col-sm-6" id="link-field"> Some link </div>
            </div>
            <div class="row">
                <div class="col-sm-12" id="image-field">Background Image </div>
            </div>
        </div>
    </body>
</html>

Answer 1

我做了一个小的可重复使用的例子，它与css here

相当常见

这是一个例子

＆＃13;

.box {
  position: relative;
}
.box__image {} .box__text {
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="box">
  <div class="box__image">
    <img src="http://placehold.it/350x150">
  </div>
  <div class="box__text">
    Testing text
  </div>
</div>

＆＃13;

只是一个小的解释position:relative用于阻止position:absolute元素退出其包含的div

Answer 2

使用位置属性，您可以设置元素。

#image-field{
    position: absolute;
    top: 0px;
}

研究css的位置属性。你会得到更多的想法 postion properties

如何使元素与另一个div重叠

2 个答案: