复杂的DIV重叠和CSS的可见性

Question

我正在寻找一个看起来像是固定在我的固定宽度页面一侧的图像对象。但它似乎是矛盾的 - 为了设计它，与图像的div必须在一个单独的div而不是主要内容，但为了使它在布局中工作，div与图像不能与主要内容分开的一个div。

很难用文字解释，所以看一下这个我掀起的演示。如果你愿意： http://www.hinchy.us/demo.html

检查该页面来源中的图片，了解我想要的更多信息。

Answer 1

.orange { position:relative; z-index:5; }

将橙色放在绿线上方。 IE6 / IE7有用吗？

Answer 2

#red { z-index: 3; }
#green-right{ z-index: 2; }
.blue { z-index: 4; width: 950px; }
.orange { left: auto; right: -140px; margin-left: -108px; -margin-right: 0px; }

我已将这些行添加到样式的底部以解决IE6 / 7中的问题。鉴于旧版IE的有缺陷的盒子模型，我建议为红色和蓝色框选择不同的尺寸/定位方案，因此它们在所有浏览器中都有正确匹配的宽度。

Answer 3

所以“固定”意思即使你滚动页面它保持固定在顶部和右边？如果是这种情况你想要：

.orange {
position: fixed;
top: 0px;
right: 0px;
}