这里是我想要完成:
我需要一个按钮,它位于距离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的上下文中溢出。