我必须完全误解 position: fixed;。
我希望页面底部的固定元素始终占据屏幕底部。它在 Chrome 48.0.2564.116 Mac 10.9.5 上按预期工作，即使调整窗口大小使得 window.document.body.clientWidth 小于相关元素的左侧位置，即 400px，小于 510px 。但是如果相对定位元素的左值大于屏幕宽度(或者如果它的宽度未设置为 0px(？!))。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.positionedRelative {
position:relative;
top: 300px;
width: 0px;
left: 510px;
}
.justifiedBottom {
padding: 5px;
background-color: rgba(200,200,200,0.5);
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="positionedRelative">
Hello
</div>
<div class="justifiedBottom">Next Page</div>
</body>
</html>
当 clientWidth 为 360 且 .positionedRelative 的左侧位置为 322px 时，将生成以下内容(注意固定元素被推离屏幕底部):
任何正确方向的想法或指示将不胜感激。谢谢。
最佳答案
从外观上看，这与您的宽度有关。看看:https://jsfiddle.net/0Lqnfmad/3/
.positionedAbsolute { position:absolute; top: 300px; width: 100%; left: 0px; text-align: center; }
.justifiedBottom { padding: 15px; background-color: rgba(200,200,200,0.5); position: fixed; bottom: 0; left: 0; width: 100%; }
看看对你有没有帮助!
关于css - 在具有相对定位元素的页面上防止固定元素消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35760393/