在圖像上帶有CSS背景色的文本

Question

我希望其中包含文本的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%;
}

如何使框顯示在圖像上方？

Answer 1

將.textwidget設置為相對位置，而不是在接觸盒上設置負邊距，而是將其絕對放置。 我不確定您為什么在背景顏色上具有！important的重要性，因為您不需要它。

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

編輯：要使您的文本完全跨過圖像的整個寬度，請在“ .textwidget”中添加“ display：inline-block”，並在“ .contact-box”中添加“ width：100％”。 在這里更新小提琴： https : //jsfiddle.net/kavzh6n5/1/

Answer 2

.contact-box {
  /* Add this */
  position: absolute;

  background-color: rgba(2, 54, 110, 0.8) !important;
  margin: -140px auto 0;
  padding: 10px;
  width: 80%;
}

Answer 3

使用絕對定位：

一，設定position:relative; 在父容器上：

div.textwidget {position:relative;}

接下來，將絕對定位放到框上（將它們添加到上面的樣式中）：

.contact-box {
    position:absolute;
    bottom:0;
    left:10px;
}

Answer 4

你需要使用

.textwidget{
    position:relative;
}

對於父級，則<p>和<div class="contact-box">可以具有

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

那將是相對於父母的。 您還可以使用z-index確定順序。