( :此处提供的解决方案在技术上并非如问题标题所述为“绝对水平 ”,而是实现了OP最初想要的功能,固定位置元素与另一个元素的右边缘为’X’距离,但固定在垂直滚动。)
我喜欢这些类型的CSS挑战。作为概念证明,是的,您可以得到想要的东西。您可能需要调整一些东西以满足您的需要,但是这里有一些通过FireFox,IE8和IE7的示例html和css(当然IE6没有position:fixed
)。
HTML:
<body>
<div class="inflow">
<div class="positioner"><!-- may not be needed: see notes below-->
<div class="fixed"></div>
</div>
</div>
</body>
CSS(用于演示的边界和所有尺寸):
div.inflow {
width: 200px;
height: 1000px;
border: 1px solid blue;
float: right;
position: relative;
margin-right: 100px;
}
div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
div.fixed {
width: 80px;
border: 1px solid red;
height: 100px;
position: fixed;
top: 60px;
margin-left: 15px;
}
是根本不设置left
或right
的水平位置,div.fixed
而要使用两个包装div来设置水平位置。的div.positioner
是 需要的,如果div.inflow
是一个固定的宽度,随着左边距div.fixed
可以设置在容器的已知宽度。但是,如果您希望容器比一个容器具有一定的宽度,那么您需要div.positioner
将推div.fixed
到第一个的右侧div.inflow
。
作为一个有趣的方面说明,当我设置overflow: hidden
(应一个需要这样做)的div.inflow
有 没有影响 的固定位置的div被对方的边界之外。显然,固定位置足以使其脱离包含div的上下文overflow
。