图像与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

除去

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

从#boxarrow添加

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 2

嘿那里，

您可以尝试的一种解决方案是将position: relative;应用于.box元素，将position: absolute;应用于#boxarrow元素。这将使#boxarrow元素脱离文档的正常流程，使其他元素不受其定位的影响。

然后，你可以调整它的位置（相对于.box元素，因为我们给它position: relative;）top，right，left，和bottom。因此，您的#boxarrow元素可能最终看起来像这样：

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

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

希望这有帮助！

Answer 3

只需将定位更改为绝对......

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