html - css:图像位于父级 div 的边框上。如何在div中的图像上方制作文字？

Question

我有一个粗边框为 10 像素的 div。在 div 里面有一张图片和一些文字。图片在边框上有轻微的移动(必须的，应该在边框之上)。

<style>
#main
{
    border:10px solid red;
    width:400px;
}
.img-to-border
{
    margin-left:-10px;
    margin-top:-10px;
    position:relative;
    float:left;
}
.text{
    border:1px solid blue;
    text-align:right;
    padding-right:30px;
}
</style>

    <div id="main">
        <img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
        <p class="text">DCBA padding-right of text is always 30px </p>
    </div>

这是一个工作代码: jsFiddle问题是如果文本长一到四个符号，它就会下降。但是，我希望它位于图像上方(上面我的意思是 z 索引，而不是从屏幕的上侧到屏幕的下侧)。附言padding-right 总是 30px。因此，它的运行方式与您在计算器上键入数字的方式完全相同 - 从右到左并在图像上方，一行。如何为我的示例执行此操作？

再次抱歉，我再说一遍，图片在边框上稍微移动了(必须，应该在边框上方)。

Answer 1

您可以制作 #main position:relative 和图像 position:absolute 这样文本就会覆盖它。在此处检查更新的 jsfiddle http://jsfiddle.net/85Zk5/2/ (实际上你不需要.img-to-border中的float这样，你可以从jsfiddle中删除它应该是一样的)