css - 让图像与 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 元素脱离文档的正常流，而其他元素不受其定位的影响。

然后，您可以使用 top 调整它的位置(相对于 .box 元素，因为我们给了它 position: relative;) 、右、左和底部。因此，您的 #boxarrow 元素最终可能看起来像这样:

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

同样，这只是一种可能的解决方案，但考虑到您的情况，它似乎是最有效的。

希望这对您有所帮助!