这是我要完成的工作：我需要一个按钮，该按钮与div的右侧保持一定距离，并且无论视口的大小如何，该按钮始终与div的侧面保持相同的距离，但是会随窗口滚动。因此，始终是div右侧的x像素，而始终是视口顶部的y像素。这可能吗？
3 回答
阿晨1998
TA贡献2037条经验 获得超6个赞
水平放置固定元素（基于另一个元素）
（免责声明：此处提供的解决方案在技术上并非如问题标题所述为“ 绝对水平 ”，而是实现了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。
- 3 回答
- 0 关注
- 569 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消