讓圖像與div重疊，然後回到文本

Question

我想要獲得溢出div的圖像，同時不會破壞文本流。

你可以看到它住在http://songbundle.org *

示例圖像上方。目前，由於形象的原因，文字和表格正確地移動並失去其中心位置。

我當前的代碼如下：

HTML：

<div class="box"> 
    <div id="boxarrow"></div> 
    <p>text goes here</p> 
</div> 

CSS：

.box { 
    margin:60px auto 0 auto; 
    width:240px; 
    border:solid 1px #7889BC; 
    background-color: #AEB8D7; 
    text-align:center; 
} 
#boxarrow { 
    background:url(image/arrow.png); 
    width:77px; 
    height:81px; 
    display:block; 
    margin-left:-60px; 
    float:left; 
} 

您的幫助表示讚賞！

Answer 1

嘿，

一個解決方案，你可以嘗試將應用position: relative;您.box元素和position: absolute;到您的#boxarrow元素。這將使#boxarrow元素脫離文檔的正常流程，其他元素不受其定位的影響。

然後，你可以調整它的位置（相對於.box元素，因爲我們給它position: relative;）與top，right，left，並bottom。所以，你的#boxarrow元素可能最終看起來是這樣的：

#boxarrow { 
    position: absolute; 
    top: 30px; 
    left: 20px; 
} 

而且，這僅僅是一個可能的解決方案，但它好像它的工作最好考慮你的情況。

希望這會有所幫助！

Answer 2

從#boxarrow刪除

margin-left:-60px; float:left; 

，並添加

left:-60px; position:absolute; 

然後加入

position:relative; 

您.box的

最終結果：

.box { 
    background-color: #AEB8D7; 
    border: 1px solid #7889BC; 
    margin: 60px auto 0 auto; 
    position: relative; 
    text-align: center; 
    width: 240px; 
} 
#boxarrow { 
    background: url("image/arrow.png"); 
    display: block; 
    height: 81px; 
    left: -60px; 
    position: absolute; 
    width: 77px; 
} 

Answer 3

只要改變定位，絕對是這樣的...

#boxarrow {background:url(image/arrow.png); width:77px; height:81px; display:block; margin-left:-60px; float:left;position: absolute;}