我可以使用位置：垂直固定和位置：绝对水平吗？答案

【问题标题】：Can i use position: fixed vertically and and position: absolute horizontally?我可以使用位置：垂直固定和位置：绝对水平吗？
【发布时间】：2011-06-16 17:32:11
【问题描述】：

我的页面底部有一些文字，上面写着“由我建造”。我将它放置在距离窗口底部和左侧 35px 的固定位置，因此它会随着您滚动而移动。我真正想要的是垂直修复它，所以它会随着你上下滚动而移动，并且总是距离窗口底部 35px，但是让它距离页面的左边缘（不是屏幕）35px，所以它水平滚动时不会移动。我检查了这个解决方案Position element fixed vertically, absolute horizontally，但不幸的是它似乎对我不起作用。仅供参考，我目前正在使用以下代码来修复它的顶部和底部，它工作正常（但在您水平滚动时也会移动）：

#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}

*html #sticky {
position: absolute;
bottom: 0px;
}

<div id="sticky">
Built by Me
</div>

非常感谢您提供的任何指点，因为我一生都无法解决如何仅在一个轴上修复它？

戴夫

【问题讨论】：

Position element fixed vertically, absolute horizontally的可能重复

标签： css position css-position

【解决方案1】：

保持固定的 div。

并有以下 javascript 代码来处理水平移动。

$(window).scroll(function(){
  $('.fixed_div').css('left',-$(window).scrollLeft());
});

【讨论】：

人们可能也想在调整窗口大小时触发这个，例如$(window).on("resize scroll",function(){...}

【解决方案2】：

我相信实现这一点的唯一方法是使用position: fixed; 并通过确定“页面”的左边缘落在哪里然后添加35px 来计算页面加载或调整大小时left 的值。如果您希望我详细说明，请告诉我。

【讨论】：

非常感谢 Scott，我希望有另一种方法，但这一切都很好，我使用了 $(window).scroll(function () { 来完成这个。虽然很奇怪如果我增加左边的位置，它似乎不起作用，但是如果我使用以下代码，它在所有浏览器中都能完美运行，出于兴趣，你知道为什么这可能只是让它保持原样吗？最初？非常感谢您的帮助
这是一个很好的问题。它一定与滚动有关，但我必须承认我对 jQuery 的了解并没有我应有的那么好，所以我不能肯定地说。不过，很高兴我能帮上忙！