我正在尝试设计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>
答案 0 :(得分:2)
我做了一个小的可重复使用的例子,它与css here
相当常见这是一个例子
.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
答案 1 :(得分:0)
使用位置属性,您可以设置元素。
#image-field{
position: absolute;
top: 0px;
}
研究css的位置属性。你会得到更多的想法 postion properties