Question

我有一个网页，我希望相应地将3个图像叠加起来作为背景，这样内容就可以放在顶部。滚动时图像不应移动，因此固定位置不起作用。下面是它们应该从后到前显示的顺序（1-3）

img - sky.jpg，我在html中设置为背景图片。
img - backDrop.png，位于sky.jpg之上。
img - BtmRight.png，我想在所有图像上方和右下方定位。

两个图像（backDrop.png，BtmRight.png）都设置了绝对定位和z-index来确定顺序。我无法让BtmRight.png图像显示在其他图像的正上方。滚动页面时，我希望右下角的图像保持不变。我也希望内容出现在所有图像上。下面是我的HTML / CSS，有什么我想念的吗？

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            </head>
            <style type="text/css">
            html {
              height: 100%;
              margin: 0;
              padding: 0;
              margin-top:100px;
              background: url(sky.jpg) no-repeat center center fixed; 
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
               background-size: cover;
            }
            body {
              height: 100%;
              margin: 0;
              padding: 0;
            }
            #imgBack {
                width: 100%;
                margin-top:100px;
                position:absolute;
                z-index:20;
                border:#0FF thin solid;
            }
            #imgBtmRight {
                position:absolute; 
                z-index:50; 
                bottom:0; 
                right:0;
            }
            </style>

            <body>

            <img id="imgBtmRight" src="BtmRight.png" width="413" height="283" /> 



            <img id="imgBack" src="backDrop.png" />

            </body>
            </html>

对此主题或任何帮助的任何启示将不胜感激。感谢

Answer 1

以正确的顺序堆叠DOM元素（以及关闭该div）可能是个好主意：

体
背景幕
BtmRight
内容

自然的“堆叠”是从下到上 - 将每个元素（图像，div等）视为一张纸。在向下移动HTML文档时，可以向堆栈中添加纸张。除非您明确更改z-indexing，否则这些文件会相互叠加 - 但如果可以的话，最好以正确的顺序开始，如果可以的话。

编辑：

似乎有效：

Example using linked images

我唯一改变的是图像来源和身体标签上的定位。除非你错过了其他的代码，否则你应该没有问题。

另一个编辑：

如果您希望右下方的图像保持原位，请使用position：fixed在该图像上而不是位置：absolute。

YET ANOTHER编辑：

如果您希望内容覆盖右下角图片的顶部，则只需为内容添加包装并使用z-indexing：

Example

使用CSS和绝对定位分层图像

1 个答案: