没有背景图像的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;
}

Updated fiddle here.

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

}

Here is an updated fiddle.

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;
}

Updated Fiddle