这是我要完成的工作:
我需要一个按钮，该按钮与div的右侧保持一定距离，并且无论视口(viewport)的大小如何，该按钮始终与div的侧面保持相同的距离，但是会随窗口滚动。
因此，始终是div右侧的x像素，而始终是视口(viewport)顶部的y像素。
这可能吗？
最佳答案
水平放置固定元素(基于另一个元素)
(免责声明:从技术上讲，The solution offered here不是“absolute horizontally”，但确实实现了OP最初想要的功能，固定位置元素与另一个元素的右边缘为'X'距离，但在其垂直滚动条中固定)
我喜欢这些类型的CSS挑战。是概念证明，是的you can get what you desire。您可能需要调整一些东西以满足您的需求，但这是一些通过FireFox，IE8和IE7(当然，IE6没有position: fixed)的html和css示例。
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超出了对方的边界没有影响。显然，固定位置足以使其脱离overflow的包含div的上下文。