位置元素垂直固定，水平绝对 [英] Position element fixed vertically, absolute horizontally
问题描述
这里是我想要完成的：
我需要一个按钮，它位于距离div的右侧一定距离，并且总是相同的
因此，从div的右侧开始的x像素
这是否可以？
位置固定元素水平基于另一个元素
（免责声明：这里提供的解决方案在技术上不是绝对水平作为问题标题，但是实现了OP最初想要的，固定位置元素是从另一个的右边缘开始的X距离，但是在其垂直滚动中是固定的） / p>
我喜欢这些类型的CSS挑战。作为概念的证明，是的，你可以得到你想要的。你可能需要调整一些事情为你的需要，但这里是一些样例html和css通过FireFox，IE8和IE7（IE6，当然，没有 position：fixed ）。
HTML：
< body&
< div class =inflow>
< div class =positioner><！ - 可能不需要：请参阅下面的注释 - >
< 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;} / *可能不需要：见下面* /
div.fixed {
width：80px;
border：1px solid red;
height：100px;
position：fixed;
top：60px;
margin-left：15px;
}
键 div.fixed 的水平线上的 right 但使用两个包装器div设置水平位置。 div.positioner 是 所需的 div.inflow 是固定宽度，因为 div.fixed 的左边距可以设置为容器的已知宽度。然而，如果你想要容器有一个百分比宽度，那么你需要 div.positioner 推动 div.fixed 到 div.inflow 的右侧。
编辑：作为一个有趣的方面，当我在 div.inflow overflow：hidden （应该需要这样做） c>在固定位置div上的没有效果在另一个边界之外。显然，固定位置足以将其从包含div的上下文中移出 overflow 。
Here's what I'm trying to accomplish:
I need a button which is positioned a certain distance from the right side of a div, and is always that same distance from the side of the div no matter the size of the viewport, but will scroll with the window.
So it is x pixels from the right side of the div at all times, but y pixels from the top of the view port at all times.
Is this possible?
Position Fixed Element Horizontally Based Off Another Element
(Disclaimer Note: The solution offered here is not technically "absolute horizontally" as the question title stated, but did achieve what the OP originally wanted, the fixed position element to be 'X' distance from the right edge of another but fixed in its vertical scroll.)
I love these types of css challenges. As a proof of concept, yes, you can get what you desire. You may have to tweak some things for your needs, but here is some sample html and css that passed FireFox, IE8 and IE7 (IE6, of course, does not have 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 (borders and all dimensions for demonstration):
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;
}
The key is to not set the left or right at all for the horizontal on the div.fixed but use the two wrapper divs to set the horizontal position. The div.positioner is not needed if the div.inflow is a fixed width, as the left margin of the div.fixed can be set to known width of the container. However, if you desire than container to have a percentage width, then you will need the div.positioner to push the div.fixed to the right side of the div.inflow first.
Edit: As an interesting side note, when I set overflow: hidden (should one need to do that) on the div.inflow had no effect on the fixed position div being outside the other's boundaries. Apparently the fixed position is enough to take it out of the containing div's context for overflow.
这篇关于位置元素垂直固定，水平绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
