css：圖像位於父級div的邊框上。如何在div上面的圖像上面創建文本？

我有一個10px的厚邊框的div。在div裏面有一張圖片和一些文字。 圖片在邊框上稍微移動（是必須的，應該在邊框上方）。css：圖像位於父級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-索引，而不是從屏幕的上邊到屏幕的下邊）。 P.S.填充右邊總是30px。因此，它與您在計算器上鍵入數字的方式完全相同 - 從右到左和在圖像上方，在一行中。如何爲我的例子做到這一點？

再一次，對不起，我再說一遍，圖片稍微移動的邊界（是必須的，應該在邊界以上）。

來源

2012-08-09 Haradzieniec

你可以讓#mainposition:relative和圖像position:absolute所以文本覆蓋它。查看這裏更新的jsfiddle http://jsfiddle.net/85Zk5/2/（其實你不需要這樣的浮點數在.img-to-border這樣，你可以從jsfiddle中刪除它應該是一樣的）

來源

2012-08-09 15:13:56 Rodolfo

對不起，你的圖片無效。我在上面的問題中寫道：圖片在邊界上稍微移動（是必須的，應該在邊界之上）。你的例子不允許這樣做。 – Haradzieniec 2012-08-09 15:16:16

@Haradzieniec好吧，你可以用'top'和'left'把它放在任何你想要的地方，就像http://jsfiddle.net/85Zk5/6/ – Rodolfo 2012-08-09 15:19:09

不錯和完美。謝謝！！！ – Haradzieniec 2012-08-09 15:23:38

我不能正確地解決你的問題。我用1嘗試了很多字母，文本總是放在同一行上，所以它就是圖像。如果您有自身的形象有任何問題，你可以在

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

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

圖像工作將採取任何發生在該頁面，但將仍然可以看到，與文本框沒有凸起。

這裏是工作提琴：http://jsfiddle.net/BDFJM/

對不起，如果我得到你的問題的錯誤的方式。

來源

2012-08-09 15:15:24 fernandofleury

您的示例工程，只需添加z-index：-20;的z-index：-10;的z-index：10;分別爲#main，.img-to-border，.text。 – Haradzieniec 2012-08-09 15:26:51

css：圖像位於父級div的邊框上。如何在div上面的圖像上面創建文本？

回答

相關問題