CSS：position：fixed里面的position：absolute

本文介绍了CSS：position：fixed里面的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，它有点工作（有其他症状）

有人听说过这个错误吗？

$ b

编辑

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

编辑

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

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

解决方案

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

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

>

查看规格：

看一下这个以在操作中查看此操作

 < 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

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！