html - 图片覆盖文字

Question

在这里我使用 3 张图片，我需要第三张图片上的文字..
我的代码是：

<div style="position: relative; left: 0; top: 0;">
    <img src="Images/img1.png" style="position: relative; top: 0; left: 0;" />
    <img src="Images/img2.png" style="position: absolute; top: 10px; left:450px;" />
    <img src="Images/img3.png" style="position: absolute; top: 0px; left:720px;" />
    <div style="position:relative;top: 0px; left:720px;">
        Home<br />
        contact<br />
    </div>
</div>

Answer 1

你试过把你的文字div放在适当的位置absolute吗？它在里面relative div...

<div style="position: relative; left: 0; top: 0;">
    <img src="Images/img1.png" style="position: relative; top: 0; left: 0;" />
    <img src="Images/img2.png" style="position: absolute; top: 10px; left:450px;" />
    <img src="Images/img3.png" style="position: absolute; top: 0px; left:720px;" />
    <div style="position:absolute;top: 0px; left:720px;">
        Home<br />
        contact<br />
    </div>
</div>

Answer 2

基本更改是这样relative使用的absolute

<div style="position:absolute;top: 0px; left:720px;">
                            Home<br />
                            contact<br />
</div>

相对定位- 相对定位的元素相对于其正常位置进行定位。

绝对定位- 绝对位置元素相对于第一个具有非静态位置的父元素定位。

检查更多细节：CSS定位

Answer 3

您应该使用 position:absolute 而不是 position:relative 以使元素脱离流动。但是，您需要调整 left 和 top 属性。