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

消除

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;）。因此，您的元素可能最终看起来像这样：toprightleftbottom#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;}