css – 位置：固定左/上/右/底没有指定 – 所需的结果在FF/IE,但不是在Safari

对不起，要问另一个立场：固定相关问题，但阅读各种其他问题和论坛线程没有帮助我这个。

下面的代码是简单的演示我如何使用position：在项目中固定到目前为止。我的原始(误)理解的位置：固定的是它最初固定相对于第一个定位的父容器，然后保持在该位置，无论视口滚动位置如何。我现在意识到这是错误的：实际上，位置：相对于最外面的容器(即html标签)的固定位置和位置：相对于具有非静态位置的第一父容器的绝对位置。

阅读关于SO的各种其他问题，我意识到，我试图实现使用position：fixed的效果是许多其他人尝试过的，但是后来实现是不可能的只是CSS：也就是说，定位一个元素相对到一个容器，但是当页面被滚动时，它保持在相对于视口的位置。

令我感到困惑的是，上述是我似乎已经实现的 – 至少在FF和IE8上。通过下面的代码示例，“固定右窗格内容”最初位于红色“中心可滚动内容”框的右侧，并且与中心内容的顶部垂直平移。可以滚动中心内容，但右侧内容保持原样，就好像它最初在正常文档流中静态定位，然后保持固定在视口上。

我现在意识到，这似乎是IE8和FF中的“工作”，因为我没有为固定元素指定顶/底/左/右属性。如果我这样做，我意识到固定的元素立即相对于视口定位。

直到现在，我已经假设 – 如果没有指定相对位置，那么位置：固定将默认放置在通常静态放置的元素。至少FF和IE8似乎正在做。

然而，在Safari中进行测试显示，Safari似乎将该固定元素放置在其容器的左侧。换句话说，没有定位，我的位置：固定元素既不是静态放置的位置，也不位于相对于视口的0,0。

到目前为止，我一直依靠非常不明确的行为，我最好是诉诸一个JavaScript解决方案来实现这个固定的定位？或者，这个行为是为IE / FF定义好的;有人可以解释Safari的放置背后的逻辑吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<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>

</head>

<body>

 <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>

</body>
</html>

解决方法

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

元素的位置并不默认为0,0。
它的位置默认设置为包含元素，因此在您的示例中，“#container-1”具有一个padding-left：20px，而其余的填充设置为0，使得元素的“default”位置为20px #container-1的墙壁左侧，顶部是#container-1顶端的0px。

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

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

我希望这有帮助！

css – 位置：固定左/上/右/底没有指定 – 所需的结果在FF/IE,但不是在Safari

解决方法

猜你在找的CSS相关文章