这里是我想要完成:
我需要一个按钮,它位于距离div的右侧一定距离,并且总是与div的边相同的距离,无论视口的大小,但将与窗口滚动。
因此,它始终是从div的右侧的x像素,但始终从视图端口的顶部的y像素。
这可能吗?
解决方法
位置固定元素水平基于另一个元素
(免责声明:The solution offered here不是技术上的“absolute horizontally”作为问题标题,但是实现了OP最初想要的,固定位置元素是“X”距离另一个的右边缘,但固定在其垂直滚动。
我喜欢这些类型的CSS挑战。作为一个概念证明,是的,you can get what you desire.你可能需要调整一些事情为你的需要,但这里是一些样例html和css通过FireFox,IE8和IE7(IE6,当然,没有位置:固定)。
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; }
关键是不要对div.fixed的水平设置左或右,但使用两个包装器div设置水平位置。如果div.inflow是固定宽度,则不需要div.positioner,因为div.fixed的左边距可以设置为容器的已知宽度。然而,如果你想要容器有一个百分比宽度,那么你将需要div.positioner将div.fixed推到div.inflow的右边。
编辑:作为一个有趣的一方面,当我设置overflow:hidden(应该需要这样做)在div.inflow没有影响固定位置div在另一个边界之外。显然,固定位置足以将其从包含div的上下文中溢出。