Css 位置：左/上/右/下非'时固定；t指定-FF/IE中的预期结果，但不在Safari中

很抱歉要问另一个

位置：修复了
相关的问题，但是阅读各种其他问题和论坛帖子对我来说没有帮助

下面的代码是我迄今为止在项目中如何使用
position:fixed
的简化演示。我最初（错误地）理解的
位置：fixed
是，它最初相对于第一个定位的父容器进行了修复，然后保持在该位置，而不管视口滚动位置如何。我现在意识到这是错误的：事实上，
position:fixed
相对于最外层容器（即
html
标记）的位置，以及
position:absolute
相对于第一个父容器的位置，而第一个父容器的位置不是
static

通过阅读其他各种问题，我意识到我试图通过使用
position:fixed
实现的效果是许多其他人都尝试过的，但后来意识到，仅使用CSS是不可能的：即，相对于容器定位元素，但当页面滚动时，让它停留在相对于视口的位置

然而，让我困惑的是，上述内容正是我所取得的成就——至少在FF和IE8上是如此。在下面的代码示例中，“固定右窗格内容”最初位于红色“中心可滚动内容”框的右侧，并与中心内容的顶部垂直。中心内容可以滚动，但右侧内容保持不变，就好像它最初在正常文档流中静态定位，但此后仍固定在视口中一样

我现在意识到，这在IE8和FF中似乎“有效”，因为我没有为
固定
元素指定
顶部
/
底部
/
左侧
/
右侧
属性。如果我这样做了，那么我会意识到
fixed
元素会立即相对于视口定位

到目前为止，我一直假设（可能是危险的）如果没有指定相对位置，那么默认情况下，
position:fixed
会将元素放置在通常静态放置的位置。至少FF和IE8似乎正在这样做

然而，在Safari中的测试表明，Safari似乎将
fixed
元素放在其容器的左侧。换句话说，在没有定位的情况下，我的
位置：fixed
元素既不是静态放置时的位置，也不是相对于视口定位在0,0处

到目前为止，我是否一直依赖于定义非常糟糕的行为，我是否最好还是求助于JavaScript解决方案来实现这一固定定位？或者，这种行为是否为IE/FF定义良好；有人能解释一下Safari的布局背后的逻辑吗



#内容中心{
保证金：0自动；
宽度：900px；
}
#标题{
高度：55px；
位置：固定；
排名：0；
宽度：990px；
}
#左窗格{
位置：固定；
顶部：12px；
边框：1px绿色实心；
}
#主窗格{
左：200px；
位置：相对位置；
顶部：66px；
宽度：760px；
边框：1px黄色固体；
}
#集装箱-1{
边框顶部：1px实心#FFFFFF；
浮动：对；
最小宽度：130px；
左侧填充：20px；
边框：1px蓝色实心；
}
#容器-0{
右边距：20px；
最小高度：470px；
溢出：自动；
填充：10px0；
位置：相对位置；
边框：1px红色实心；
}
.side信息列表修复程序{
位置：固定；
}
固定左窗格内容
固定右窗格内容
中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

中心可滚动内容

我相信您正在寻找的答案如下

元素的位置不默认为0,0。
默认情况下，它的位置是相对于包含元素设置的，因此在您的示例中，“#container-1”的左边有一个padding:20px，而其余的padding设置为0，使得元素的“默认”位置为#container-1的墙的左边20px，顶部距离#container-1的顶部为0px

默认情况下，此元素的默认位置和未滚动的“我的视口”从顶部到左侧为63px，左侧显然取决于浏览器的宽度。但是，如果不覆盖顶部和左侧，则渲染引擎已将它们定义为顶部：63px，左侧：893px

然后在调整窗口大小时，调整该位置以反映bas的位置
position:fixed;
top:63px; // defined by default during browser rendering in some browsers (based on scroll position on load)
left:893px; // defined by default during browser rendering in some browsers (based on scroll position / width of browser at time of load)

function SetFixedPositioning(element) {
    var currentOffset = $(element).offset();
    $(element).css("position", "fixed");
    $(element).offset(currentOffset);           
}

SetFixedPosition($("#element-to-position"));