position：当left / top / right / bottom未指定时固定 - 期望导致FF / IE，但不在Safari中 [英] position:fixed when left/top/right/bottom aren't specified - desired results in FF/IE, but not in Safari
问题描述
很抱歉要问另一个位置：固定相关问题，但通过各种其他问题和论坛线程阅读没有帮助我这个。
Sorry to have to ask yet another position:fixed related question, but reading through various other questions and forum threads hasn't helped me with this one.
下面的代码是一个简单的演示，演示了我如何在项目中使用 position：fixed 。对于 position：fixed 的我原来的（mis）理解是它最初相对于第一个定位的父容器修复，然后保持在该位置，而不管视口滚动位置。我现在意识到这是错误的：事实上， position：fixed 相对于最外层容器的位置（即 html ）和 position：absolute 相对于位置不是 static 的第一个父容器的位置。
The code that follows is a simplified demonstration of how I have been using position:fixed in a project to date. My original (mis)understanding of position:fixed is that it initially fixes relative to the first positioned parent container, and thereafter remains in that position regardless of viewport scroll position. I now realise that is wrong: in fact, position:fixed positions relative to the outermost container (i.e. the html tag) and position:absolute positions relative to the first parent container that has a position other than static.
阅读关于SO的各种其他问题，我意识到我试图使用位置：固定是许多其他人已经试图，但后来意识到是不可能的只是CSS：一个元素相对于一个容器，但然后它保持在相对于视口的位置，当页面滚动时。
Reading through various other questions on SO, I realise that the effect I was trying to achieve using position:fixed is one that many other people have tried to, but then realised is not possible with just CSS: That is, to position an element relative to a container, but then have it stay where it is relative to viewport when the page is scrolled.
让我困惑的是，上面是我似乎已经实现 - 至少在FF和IE8。在下面的代码示例中，固定右窗格内容最初位于红色中央可滚动内容框的右侧，并且与中心内容的顶部垂直。中心内容可以滚动，但右侧内容保持在原来的位置，就好像它最初静态地位于正常文档流中，但是之后保持固定到视口。
What confuses me though is that the above is exactly what I seemed to have achieved - at least on FF and IE8. With the code example below, the "fixed right pane content" is initially positioned to the right of the red "centre scrollable content" box, and is vertically level with the top of the centre content. The centre content can be scrolled, but the right-hand content stays where it is, as if it initially positions statically in normal document flow but thereafter remains fixed to the viewport.
顶部 / 底部 / left / right 属性。如果我这样做，那么我意识到 fixed 元素立即相对于视口定位。
I now realise that this appears to 'work' in IE8 and FF simply because I have not specified top/bottom/left/right attributes to the fixed element. If I do, then I realise that the fixed element immediately becomes positioned relative to the viewport.
我已经假设 - 可能是危险的 - 直到现在如果没有指定相对位置，那么 position：fixed 将默认将该元素放置在通常静态放置的位置。至少FF和IE8似乎在做这件事。
I had assumed - perhaps dangerously - until now that if relative positions aren't specified, then position:fixed will by default place that element where it would normally be statically placed. At least FF and IE8 seem to be doing just that.
然而，在Safari中测试表明，Safari似乎把固定元素放在容器的左边。换句话说，没有定位，我的 position：fixed 元素既不是静态放置的位置，也不是相对于视口定位在0,0。
Testing in Safari, however, shows that Safari seems to place that fixed element to the left of its container. In other words, without positioning, my position:fixed element is neither where it would be when statically placed, nor is it positioned at 0,0 relative to the viewport.
到目前为止，我一直依赖于定义非常差的行为，我最好还是使用JavaScript解决方案来实现这个固定的定位？或者，这是为IE / FF定义的行为;
Have I been relying on very poorly defined behaviour to date, and am I best resorting to a JavaScript solution after all to achieve this fixed positioning? Or, is this behaviour well-defined for IE / FF; and can someone explain the logic behind Safari's placement please?
<!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>
推荐答案
我相信你要找的答案是...
I believe the answer you're looking for is as follows...
元素的位置不会默认为0,0。
它的位置是相对于包含元素默认设置的，因此在你的示例中，＃container-1有一个padding-left：20px，而填充的其余部分设置为0，使默认位置的＃container-1的墙的左边20px的元素，顶部是＃container-1的顶部的0px。
The position of an element does not default to 0,0. It's position is set by default relative to the containing element, therefor in your example, "#container-1" has a padding-left: 20px whereas the rest of the padding is set to 0 making the "default" position of the element 20px left of the wall of #container-1 and the top is 0px from the top of #container-1.
默认的默认位置并且我的视口没有滚动将从顶部63px，左侧显然取决于您的浏览器的宽度。但是，如果你不重写顶部和左边，它们已经由渲染引擎定义为top：63px，left：893px。
The default position of this element by default and my viewport not scrolled would be 63px from the top and the left is obviously dependent on the width of your browser. However, if you do not override the top and left, they are already defined by the rendering engine as the top:63px, left:893px.
该位置被调整以反映基于视口的位置，以便向下滚动位置被改变以保持其固定。
Then on window resize, that position is adjusted to reflect the position based on the viewport so as you scroll down the position is changed to keep it fixed.
因此，通过简单地添加position：fixed ;您的属性（就浏览器而言）
如下：
So, by simply adding "position:fixed;" your properties would (as far as the browser is concerned) be as follows:
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)
$ b b
此外，IE6等，不支持position：fixed。
http://fiddle.jshell.net/uaE4g/4/show/
我希望这有助于！
这篇关于position：当left / top / right / bottom未指定时固定 - 期望导致FF / IE，但不在Safari中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
