复杂的 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;
}