CSS定位沒有背景圖片

Question

我在將文字放在圖片頂部時遇到問題。 圖片不在背景中，僅帶有圖片標簽。

問題是我無法更改html代碼。 是否有可能實現我想要的但無需更改html代碼。

<div class="home_box">
<img src="http://netdna.seospecialist.co.uk/wp-content/uploads/2012/12/christmas-three.png" class="holding">
<h4>hot off the server</h4>
</div>

Jsfiddle： http ： //jsfiddle.net/EkzdE/11/

我已經更新了小提琴。 現在，當您調整窗口大小時，圖像正在移動，但文本停留在其中。是否有任何方法可以使其響應

Answer 1

寫：

.home_box h4 {
    width: 200px;
    top:0;margin:0;
}

在這里更新了小提琴。

Answer 2

試試這個： FIDDLE

CSS：

.home_box {
    position:relative;
    text-align:center;
}
img.holding {
    position:relative;
    margin-top:40px;
}
.home_box h4 {
    color: #000;
    font-family:'arial';
    font-size: 15px;
    left: 140px;
    line-height: 33px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
    height:40px;
    left:50%;
    top:0;
    margin-left:-100px;
}

Answer 3

您只需將h4元素的top屬性設置為零，使其位於div的頂部，就在圖像上方。

.home_box h4 {
    ...
    left: 0;
    top: 0;
    ...

}

這是更新的小提琴。

Answer 4

您應該在圖像和文本上都relative 。

這樣可以確保它們都隨着窗口大小的變化而按照div移動。

然后，為了將文本放在圖像頂部，請使用負的上邊距。

.home_box {
    position:relative;
    text-align:center;
}
img.holding {
    position:relative;
}
.home_box h4 {
    color: #000;
    font-family:'arial';
    font-size: 15px;
    margin-top: -200px;
    margin-left: auto;
    margin-right: auto;
    line-height: 33px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
}

更新小提琴