-2

我有一个网页，我想在其中相应地对 3 层图像进行分层以充当背景，以便可以将内容放在顶部。滚动时图像不应移动，因此固定位置不起作用。以下是它们应该从后到前出现的顺序 (1-3)

  1. img - 我在 html 中设置为背景图像的 sky.jpg。
  2. img - 设置在 sky.jpg 上方的 backDrop.png。
  3. 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>

任何有关该主题的信息或帮助将不胜感激。谢谢

4

1 回答 1

4

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

  1. 身体
  2. 背景
  3. BtmRight
  4. 内容

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

编辑：

似乎正在工作：

使用链接图像的示例

我唯一改变的是图像源和 body 标签上的位置。除非您在代码中遗漏了其他内容，否则您应该没有问题。

另一个编辑：

如果您希望右下角的图像保持原位，请使用位置：固定在该图像上而不是位置：绝对。

另一个编辑：

如果您希望内容超出右下角图像的顶部，您只需为您的内容添加一个包装器并使用 z-indexing：

例子

于 2012-09-19T08:42:53.767 回答