垂直定位元素，水平定位绝对元素
垂直定位元素，水平定位绝对元素
提问于 2010-07-22 03:45:05
以下是我想要实现的目标：
我需要一个按钮，它被放置在一个div的右侧一定的距离，并始终是同一距离的div的一侧，无论视口的大小，但将滚动与窗口。
因此，它始终位于div右侧的x像素，但始终位于视口顶部的y像素。
这个是可能的吗？
回答 1
Stack Overflow用户
发布于 2012-06-27 12:16:06
我来到这里是为了寻找一个类似问题的解决方案，那就是有一个跨越窗口宽度的页脚栏，位于(可变高度和宽度)内容的下方。换句话说，使页脚看起来相对于它的水平位置是“固定的”，但相对于它的垂直位置保持它在文档流中的正常位置。在我的例子中，我让页脚文本右对齐，所以我可以动态地调整页脚的宽度。这是我想出来的：
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%)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3303173
复制相关文章
相似问题