位置：在未指定左/上/右/下时修复-在FF / IE中获得所需结果，但在Safari中未得到期望的结果

Question

很抱歉不得不问另一个position:fixed相关问题，但是通读其他各种问题和论坛主题并没有帮助我解决这个问题。

下面的代码是position:fixed到目前为止我在项目中使用情况的简化演示。我最初的（错误）理解position:fixed是，它最初相对于第一个定位的父容器固定，然后不管视口滚动位置如何，都保持在该位置。我现在意识到这是错误的：实际上，position:fixed相对于最外层容器（即html标记）的position:absolute位置和相对于第一个父容器（其位置不是）的位置static。

通过阅读有关SO的其他各种问题，我意识到我试图使用的效果position:fixed是许多其他人试图实现的效果，但是仅CSS不可能实现：也就是说，相对于容器放置元素，但在滚动页面时将其保留在相对于视口的位置。

令我困惑的是，以上正是我似乎已经实现的-
至少在FF和IE8上。在下面的代码示例中，“固定的右窗格内容”最初位于红色的“中心可滚动内容”框的右侧，并且与中心内容的顶部垂直对齐。中心内容可以滚动，但右侧内容会保留在原处，就好像它最初在正常文档流中静态放置，但此后仍固定在视口中一样。

我现在认识到这似乎“工作”在IE8和FF只是因为我没有指定top/ bottom/ left/
right属性的fixed元素。如果这样做，那么我意识到该fixed元素将立即相对于视口定位。

我一直假设-可能很危险-
直到现在为止，如果未指定相对位置，则position:fixed默认情况下会将该元素放置在通常静态放置的位置。至少FF和IE8似乎正在这样做。

但是，在Safari中进行的测试表明，Safari似乎将该fixed元素放在了其容器的左侧。换句话说，如果没有定位，则我的position:fixed元素既不会处于静态放置的位置，也不会相对于视口位于0,0处。

到目前为止，我是否一直依赖定义不明确的行为，而我是否最好还是使用JavaScript解决方案来实现此固定定位？或者，是否为IE /
FF明确定义了此行为？有人可以解释一下Safari放置的逻辑吗？

<style type="text/css">

  #content-centre {

    margin: 0 auto;

    width: 900px;

  }



  #header {

    height: 55px;

    position: fixed;

    top: 0;

    width: 990px;

  }



  #left-pane {

    position: fixed;

    top: 12px;

    border: 1px green solid;

  }



  #main-pane {

    left: 200px;

    position: relative;

    top: 66px;

    width: 760px;

    border: 1px yellow solid;

  }



  #container-1 {

    border-top: 1px solid #FFFFFF;

    float: right;

    min-width: 130px;

    padding-left: 20px;

    border: 1px blue solid;

  }



  #container-0 {

    margin-right: 20px;

    min-height: 470px;

    overflow: auto;

    padding: 10px 0;

    position: relative;

    border: 1px red solid;

  }



  .side-info-list-fixer {

    position: fixed;

  }

</style>



<div id="content-centre">



  <div id="header">

  </div>



  <div id="left-pane">

    Fixed left pane content

  </div>





  <div id="main-pane">

    <div id="page-module-containers">



      <div id="container-1">

        <div class="side-info-list-fixer"> Fixed right pane content </div>

      </div>



      <div id="container-0">

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

        <p>Centre scrollable content</p>

      </div>



    </div>

  </div>



</div>

Answer 1

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

元素的位置默认不为0,0。默认情况下，它的位置是相对于包含元素设置的，因此在您的示例中，“＃container-1”的padding-
left为：20px，而其余的padding设置为0，则元素的“默认”位置为20px
＃container-1墙的左侧，顶部距离＃container-1顶部0px。

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

然后在调整窗口大小时，将调整该位置以反映基于视口的位置，因此当您向下滚动时，将更改该位置以使其固定。

因此，只需添加“ position：fixed;” 您的属性（就浏览器而言）如下：

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)

我希望这有帮助！