将两张图片与下面的文字叠加

Question

我正在尝试实现一个上面覆盖有图像的图像。因为我需要说明这张图片上有视频内容。现在从 post 这里我遇到了这段代码（请原谅我丢失了链接），它确实有效，但问题是它也覆盖了图像下方的文本内容。为了参考我到底想要实现什么，我有这段代码 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

关于 .container 和 .imageOne

和

top:0

在 .image 上

Answer 2

目前您的 div 重叠，因为您将 parent 容器设置为固定位置，因此它将锚定到其 parent 的 (0,0)，任何然后将其他元素绘制到那里的默认 (0,0) 坐标 parent（在这种情况下为 body）。

为了解决这个问题，将 .container 元素设置为 relative，文本 div 现在将在 (0,100) 绘制为 container ] 相对于 body 的高度为 100px。

这对于您希望 .image 在 .container 中重叠的情况也是有意义的，两个 .image div 的位置都设置为 absolute 表示它们将在 parent 内的 (0,0) 绘制（在本例中为 .container）。

更新后的 css 看起来像这样：

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

请注意 parent div 现在包含宽度和高度信息，children 图像现在从 parent 继承此信息，但是您可以使它们变小。希望这有帮助:)

JSFiddle Solution

将两张图片与下面的文字叠加

Overlaying of two image with text on below

html

css

css-position