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，以便文本覆盖它。在这里查看更新的jsfiddlehttp://jsfiddle.net/85Zk5/2/（其实.img-to-border这种方式不需要float，可以从jsfiddle中去掉应该是一样的）

Answer 2

我无法正确解决您的问题。我尝试了 1 到很多字母，文本总是放在同一行，所以它是图像。如果您对图像本身有任何问题，您可以继续处理

#main {position: relative;} /* Keep it just the same */

img {
   position: absolute;
   top: -10px; left: -10px;
}

图像不会出现在页面上，但仍然可见并且与文本框没有碰撞。

这是一个有效的小提琴：http://jsfiddle.net/BDFJM/

对不起，如果我把你的问题弄错了。