位置元素垂直固定，绝对水平
这是我想要完成的：
我需要一个button，它位于离div右侧一定距离的位置，无论视口的大小如何，始终与div的边相同，但会随窗口一起滚动。
因此，始终是div右侧的x个像素，而始终是视图端口顶部的y个像素。
这可能吗？
基于另一个元素的水平位置固定元素
（ 免责声明 ： 这里提供的解决scheme在技术上并不是问题标题中所说的“ 绝对水平 ”，而是确实达到了OP最初想要的，固定位置元素为“X”距离右边缘的距离，但固定在垂直滚动。）
我喜欢这些types的CSS挑战。 作为一个概念的certificate，是的， 你可以得到你想要的东西 。 你可能不得不根据你的需要调整一些东西，但是这里有一些示例html和通过FireFox，IE8和IE7（IE6，当然，没有position: fixed ）的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; }
关键是不要在div上设置水平方向的left或right ，而是使用两个包装div来设置水平位置。 如果div.inflow是固定宽度， div.positioner是不需要的，因为div.inflow的左边距可以设置为容器的已知宽度。 然而，如果你希望容器有一个百分比的宽度，那么你将需要div.positioner推到div.fixed的右边。
编辑：作为一个有趣的方面说明，当我设置overflow: hidden （应该需要这样做）在div.inflow 没有影响固定位置div在对方的边界之外。 显然，固定位置足以将其从包含div的上下文中overflow 。
我到达这里寻找一个类似的问题的解决scheme，这是一个跨越窗口的宽度，并坐在（可变高度和宽度）内容下面的页脚栏。 换句话说，看起来页脚相对于其水平位置是“固定的”，但相对于其垂直位置，在文档stream中保持其正常位置。 在我的情况下，我有页脚文本右alignment，所以它为我dynamic调整页脚的宽度。 这是我想出来的：
HTML
<div id="footer-outer"> <div id="footer"> Footer text. </div><!-- end footer --> </div><!-- end footer-outer -->
CSS
#footer-outer { width: 100%; } #footer { text-align: right; background-color: blue; /* various style attributes, not important for the example */ }
CoffeeScript / JavaScript
（使用prototype.js）。
class Footer document.observe 'dom:loaded', -> Footer.width = $('footer-outer').getDimensions().width Event.observe window, 'scroll', -> x = document.viewport.getScrollOffsets().left $('footer-outer').setStyle( {'width': (Footer.width + x) + "px"} )
编译成：
Footer = (function() { function Footer() {} return Footer; })(); document.observe('dom:loaded', function() { return Footer.width = $('footer-outer').getDimensions().width; }); Event.observe(window, 'scroll', function() { var x; x = document.viewport.getScrollOffsets().left; return $('footer-outer').setStyle({ 'width': (Footer.width + x) + "px" }); });
这在FireFox中很好用，在Chrome中也很好（有点紧张）。 我还没有尝试其他浏览器。
我还希望页脚下面的空余空间是不同的颜色，所以我加了这个footer-stretch div：
HTML
... </div><!-- end footer --> <div id="footer-stretch"></div> </div><!-- end footer-outer -->
CSS
#footer-outer { height: 100%; } #footer-stretch { height: 100%; background-color: #2A2A2A; }
请注意，对于＃footer-stretch div的工作，所有直到body元素的父元素（可能还有html元素 – 不确定）必须有一个固定的高度（在这种情况下，height = 100％）。
经过多次挖掘（包括本文），我找不到我喜欢的解决scheme。 接受的答案在这里没有做OP的标题阅读，我能find的最好的解决scheme肯定导致了跳动的元素。 然后，它打我：元素是“固定”，检测到水平滚动发生时，并将其切换到绝对定位。 这里是结果代码：
查看它作为一个代码笔。
HTML
<div class="blue"> <div class="red"> </div> </div>
CSS
/* Styling */ .blue, .red { border-style: dashed; border-width: 2px; padding: 2px; margin-bottom: 2px; } /* This will be out "vertical-fixed" element */ .red { border-color: red; height: 120px; position: fixed; width: 500px; } /* Container so we can see when we scroll */ .blue { border-color: blue; width: 50%; display: inline-block; height: 800px; }
JavaScript的
$(function () { var $document = $(document), left = 0, scrollTimer = 0; // Detect horizontal scroll start and stop. $document.on("scroll", function () { var docLeft = $document.scrollLeft(); if(left !== docLeft) { var self = this, args = arguments; if(!scrollTimer) { // We've not yet (re)started the timer: It's the beginning of scrolling. startHScroll.apply(self, args); } window.clearTimeout(scrollTimer); scrollTimer = window.setTimeout(function () { scrollTimer = 0; // Our timer was never stopped: We've finished scrolling. stopHScroll.apply(self, args); }, 100); left = docLeft; } }); // Horizontal scroll started - Make div's absolutely positioned. function startHScroll () { console.log("Scroll Start"); $(".red") // Clear out any left-positioning set by stopHScroll. .css("left","") .each(function () { var $this = $(this), pos = $this.offset(); // Preserve our current vertical position... $this.css("top", pos.top) }) // ...before making it absolutely positioned. .css("position", "absolute"); } // Horizontal scroll stopped - Make div's float again. function stopHScroll () { var leftScroll = $(window).scrollLeft(); console.log("Scroll Stop"); $(".red") // Clear out any top-positioning set by startHScroll. .css("top","") .each(function () { var $this = $(this), pos = $this.position(); // Preserve our current horizontal position, munus the scroll position... $this.css("left", pos.left-leftScroll); }) // ...before making it fixed positioned. .css("position", "fixed"); } });
