Question

我正在尝试实现覆盖在其上的图像的图像。因为我需要告诉它这个图像上有视频内容。现在从这里的一些帖子我遇到了这个代码（原谅我，我丢失了链接）实际上有效，但问题是它还覆盖了图像下方的文本内容。为了参考我想要实现的目标，我有这段代码here。我只是硬编码了我想看到的内容，而且这里仍然是代码：

<div class="container">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>

<div><br /><br /><br /><br /><br /><br />Text should be below the image</div>

我只需要修复图片在文本上重叠的部分。谢谢！

Answer 1

jsfiddle中的固定版本http://jsfiddle.net/uS7nw/270/

只需要一些调整。特别是使用

position:relative

on .container和.imageOne

和

top:0

on .image

Answer 2

目前您的div重叠是因为您将父容器设置为固定位置，因此它将锚定到其父级的（0,0），然后将任何其他元素绘制到默认（0,0）的coords有父母（在这种情况下是身体）。

要解决此问题，请将.container元素置于relative，文本div现在将其位置绘制在(0,100)，因为container的高度为100px相对于身体。

对于您希望.image在.container中重叠的情况，这也是有意义的，两个.image div的位置都设置为absolute，这意味着它们将被绘制at（0,0）在其父级（在这种情况下为.container）。

更新的css看起来像这样：

.container {
    position: relative;
    width: 100px;
    height: 100px;
}
.image {
    position: absolute;
    width: inherit;
    height: inherit;
    border: 1px solid red;
}

请注意，父div现在包含宽度和高度的信息，子图像现在从父级继承此信息，但您可以将它们缩小。希望这会有所帮助：）

JSFiddle Solution

覆盖两个图像与下面的文本

2 个答案: