CSS：position：fixed里面的position：absolute [英] CSS: position:fixed inside of position:absolute

问题描述

我遇到了一些非常奇怪的行为，并且在我测试的每个浏览器上都不一致。

我有一个非常复杂的布局，主要问题在这里：

 < div id =drop> 
< div id =header>< / div> 
< / div> 
  

#drop > position：absolute 和 z-index：100

#header 有 position：fixed; top：60px;

当我开始向下滚动Chrome时忽略了 position：fixed 规则。如果我从 #drop 中移除上述两种样式中的 ，那么Chrome会开始尊重位置：fixed 规则。

无法使其在Ubuntu Chrome 23.0.1271.97上正常工作，在Mac Chrome 25.0.1364.99上也看到相同的行为。我的朋友使用Ubuntu Chrome 25.0.1364.68测试版，它为他正常工作。我已经在firefox上测试了它，它有点工作（有其他症状）

有人听说过这个错误吗？

编辑

我使用openlayers地图作为另一个div与 position：fixed 如果我删除该图层或至少将其更改为 display：none p>

编辑

注意到在此错误存在的情况下，如果我来回更改缩放级别，位置调整自己到正确的行为。对我来说，这表示一个webkit问题，无法在滚动执行一些内部回调函数。

另一个非常奇怪的是，我有一些链接 #header ，如果我只是点击预期的位置，即使div没有出现在它们工作。总体我注意到，只有渲染已损坏。如果在任何时间点，我通过调整窗口大小，改变缩放或只是做Select-All来强制浏览器重新渲染，那么标题栏会跳到正确的位置，但不会保持固定。

解决方案

你在评论中提到OpenLayers使用CSS变换。在这种情况下：

具有固定位置的元素将相对于具有transform的元素 - 不是相对于视口

>

查看规格：变换渲染模型

为transform属性指定非none值
建立新的局部坐标系

看一下这个 FIDDLE 。

 < div class =wpr> 
< div class =fixed>< / div> 
< / div> 
 
 .wpr 
 {
 width：200px; 
 height：1000px; 
 background：pink; 
 position：relative; 
 margin：0 200px; 
 -webkit-transform：translateX（0）; 
 transform：translateX（0）; 
} 
 .fixed 
 {
 width：200px; 
 height：200px; 
 margin：50px; 
 position：fixed; 
 top：0; 
 left：0; 
 background：aqua; 
} 
  

I'm running into some extremely strange behaviors, and non-consistant across every browser i've tested.

I've a pretty complex layout, but the main issue lies here:

<div id="drop">
  <div id="header"></div>
</div>

#drop has position:absolute and z-index:100
#header has position:fixed; top:60px;

As I start scrolling down Chrome ignores the position:fixed rule. If I remove either of the two styles above from #drop then Chrome starts respecting the position:fixed rule.

can't get it working on Ubuntu Chrome 23.0.1271.97 and see the same behavior on Mac Chrome 25.0.1364.99. My friend uses Ubuntu Chrome 25.0.1364.68 beta and it works correctly for him. I've tested it on firefox and it kinda works (with other symptoms)

Has anyone heard of this error? or can anyone even reproduce it?

edit

I'm using openlayers map as another div with position:fixed if I delete that layer or at least change it to display:none then this weird bug goes away.

edit

Noticed that during the presence of this bug, if I change the zoom level back and forth, then the position adjusts itself to the proper behavior. To me, this indicates a webkit issue that fails to execute some internal callback function on scroll.

Another extremely strange thing is that I have a few links inside of #header and they work if I just click the expected location, even though the the div does not appear there. Overall I've noticed that it's only the rendering that's broken. If at any point of time I force the browser to re-render by resizing the window, or changing zoom, or just doing Select-All, then the header bar jumps to the proper position, but does not remain fixed.

解决方案

You mentioned in the comments that OpenLayers uses CSS transforms. That being the case:

the element with fixed positioning will become relative to the element with the transform - not relative to the viewport

Take a look at the spec: The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

Look at this FIDDLE in a webkit browser to see this in action

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}

这篇关于CSS：position：fixed里面的position：absolute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！