位置：未指定左/上/右/下时固定 - 在FF / IE中需要结果，但在Safari中不需要

问题描述 投票：25回答：3

很抱歉不得不问另一个与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>
css css-position
3个回答
17
投票

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

元素的位置不默认为0,0。它的位置默认设置相对于包含元素，因此在你的例子中，“＃container-1”有一个padding-left：20px而padding的其余部分设置为0，使得元素的默认位置为20px在＃container-1的墙的左边，顶部是＃container-1顶部的0px。

默认情况下此元素的默认位置和未滚动的视口将从顶部开始是63px，左侧显然取决于浏览器的宽度。但是，如果不覆盖顶部和左侧，它们已经被渲染引擎定义为顶部：63px，左：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)

另外，IE6和喜欢的，不支持位置：固定在一起。 http://fiddle.jshell.net/uaE4g/4/show/

我希望这有帮助！

0
投票

我在safari 5中看到了类似的结果，而不是在safari 6中。

在浏览器中，它看起来像这样：

如果未在固定元素上定义其中一个位置的属性，则该属性的初始值与对象是静态的相同。它似乎。

页面加载后，它表现得像静态一样。因此，如果我垂直固定一个元素，但不是水平，我可以上下滚动，元素保持固定，但如果我侧身滚动元素与页面一起滚动。

但是在safari 5中，如果元素位于具有定位的容器内，它似乎表现得如你所描述的那样：初始值与静态相同，但之后它仍然固定在该位置上。

你的'side-info-list-fixer'在'main-pane'中，其位置为：relative。取消它，你可能会看到与safari 6和大多数其他浏览器相同的行为。

我不知道什么是正确的，你是否应该依赖这些功能......

$ 2c，* -pike

0
投票

我有相同的要求，将元素fixed定位在与视口相关的自然（默认）static位置。我最终使用这个简单的jQuery函数。

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

像这样使用它：

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

我的用例是流入文档的二级导航菜单，然后固定在该位置。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.