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

时间:2016-12-27 05:47:31

标签: html css

我正在尝试设计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>

2 个答案:

答案 0 :(得分:2)

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

相当常见

这是一个例子

&#13;
&#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;
&#13;
&#13;

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

答案 1 :(得分:0)

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

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

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