Question

我试图左右显示两个图像，包括文本，控件以及我心中想要的任何其他图像。为此，我有以下内容：

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

除了一件小事之外，这一切都很棒......左边的div，“redbox.png”总是被我想要的s（或者元素所占据的任何位置）的数量减少。我可以将元素放在图像之后，但是将它们放在我想要的方式更容易，并且在我为框架设置动画时将它们保留在原位。

现在，为什么我使用图像而不是background-img？好吧，我想让图像自动调整到周围的<div>，这是我发现轻松做到的唯一方法（用javascript手动调整大小是一个选项，但是复杂的一个，因为方框会动画）。

有什么想法吗？谢谢！

Answer 1

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

http://jsfiddle.net/3fJcR/1/

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <div style="position:absolute; left:61px; top:50px; width: 319px; z-index:1">This is text</div>
        <div style="position:absolute; left:61px; top:64px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

Answer 2

对于内部叠加，您可以position:absolute包裹div和position:absolute。那么内部绝对是相对于外部绝对定位元素而不是身体。

看看这个例子，看看我在说什么：

http://jsfiddle.net/mohsen/TbkjK/7/

Answer 3

为了在图像上书写文字，你可以将图像放在背景样式中，然后像这样使用alt文本 -

<img scr="" alt="text"/>

<style>
.img{background-image:url('IMAGE_URL'); }
</style>

HTML / CSS - 在img标签上显示文本

3 个答案: