我有一个网页，我想在那里对3张图像进行相应的分层，作为后台，这样内容就可以放在上面。滚动时图像不应该移动，所以固定位置不起作用。以下是它们从后到前(1-3)的顺序
- img-sky.jpg，我将其设置为html中的背景图像
- img-backDrop.png，它设置在sky.jpg之上
- img-BtmRight.png，我想把它放在所有图像的上方和右下角
两个图像(backDrop.png、BtmRight.png)都设置了绝对定位和z索引以确定顺序。我无法使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>
如有任何关于该主题的线索或协助，我们将不胜感激。感谢
按照正确的顺序堆叠DOM元素(以及关闭该div)可能是个好主意：
- 身体
- Backdrop
- BtmRight
- 内容
自然的"堆叠"是自下而上的——将每个元素(图像、div等)想象成一张纸。当您向下移动HTML文档时，您会将纸张添加到堆栈中。除非你明确地改变了z索引，否则这些论文会叠放在一起——但如果可以的话，最好一开始就把它们按正确的顺序排列。
编辑：
似乎在起作用：
使用链接图像的示例
我唯一改变的是图像来源和身体标签上的位置。除非您在代码中遗漏了其他内容，否则您应该没有问题。
另一个编辑：
如果希望右下角的图像保持不变，请使用position:fixed在该图像上，而不是position:absolute。
另一个编辑：
如果你想让内容越过右下角图像的顶部，你只需要为你的内容添加一个包装，并使用z索引：
示例