我想要一个带有文字的div显示在图像上方。您可以(有点)看到我在这里要做的事情:右下角的联系人框中的http://innerwestadv.com/odom/。文本显示在图像上方,但背景颜色显示在下方。
这是HTML:
<div class="visible-all-devices ftr-widget">
<h2>Contact</h2>
<div class="textwidget">
<p><a href="http://innerwestadv.com/odom/contact/"><img width="328" height="254" alt="map" src="http://innerwestadv.com/odom/wp-content/uploads/2015/05/map.jpg" class="aligncenter size-full wp-image-121"></a></p>
<div class="contact-box">
<h4>One Day One Million</h4>
<p>(775)359-3000 x 129<br>
985 Damonte Ranch Parkway<br>
Suite 310<br>
Reno, NV 89521
</p>
</div>
</div>
</div>
CSS:
.contact-box {
background-color: rgba(2, 54, 110, 0.8) !important;
margin: -140px auto 0;
padding: 10px;
width: 80%;
}
如何让框出现在图像上方?
答案 0 :(得分:1)
将.textwidget设置为相对位置而不是接触框上的负边距,将其置于绝对位置。我不确定你为什么这么做!在背景颜色上很重要,因为你不需要它。
.textwidget {
position: relative
}
.contact-box {
background-color: rgba(2, 54, 110, 0.8);
position: absolute;
padding: 10px;
width: 80%;
bottom: 0;
}
https://jsfiddle.net/kavzh6n5/
编辑:让文字完全覆盖图像的整个宽度, 将'display:inline-block'添加到.textwidget,将'width:100%'添加到.contact-box。更新了小提琴:https://jsfiddle.net/kavzh6n5/1/
答案 1 :(得分:0)
.contact-box {
/* Add this */
position: absolute;
background-color: rgba(2, 54, 110, 0.8) !important;
margin: -140px auto 0;
padding: 10px;
width: 80%;
}
答案 2 :(得分:0)
使用绝对定位:
首先,在父容器上设置position:relative;
:
div.textwidget {position:relative;}
接下来,将绝对定位放在方框上(将这些添加到上面的样式中):
.contact-box {
position:absolute;
bottom:0;
left:10px;
}
答案 3 :(得分:0)
你需要使用
.textwidget{
position:relative;
}
为父级,然后<p>
和<div class="contact-box">
可以有
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
那将是相对于父母的。
您也可以使用z-index
来确定订单。