相对于父容器的固定位置

Question

我试图将一个元素固定在一个容器中，但固定元素似乎是根据屏幕而不是父元素定位自己。

我的代码：

<div class="relative"> 
    <div class="absolute"> 
    <div class="fixed"></div> 
    </div> 
</div> 

的CSS：

.relative{ 
    position: relative; 
    height:800px; 
    width: 400px; 
    background: #000; 
} 

.absolute{ 
    height:60px; 
    width: 60px; 
    position: absolute; 
    top:0; 
    right:0; 
    background: #ccc; 
    -webkit-transform: translateZ(0); 
} 

.fixed{ 
    height:20px; 
    width: 20px; 
    background: red; 
    position: fixed; 
    top:0; 
    right:0; 
} 

我想红色框是固定的灰色方框内。但现在当我滚动框滚动，并没有保持固定。

亲身体验：http://codepen.io/undefinedtoken/pen/abhgc

Answer 1

这里的问题是与-webkit-transform。

Chrome无法在转换下的元素上渲染position:fixed。

Read here

你可以尝试删除transform从.absolute股利和计算它的父母后宽度设置margin-left到.fixed股利。在你的情况下它是40px。

实施例：

.absolute{ 
    height:60px; 
    width: 60px; 
    position: absolute; 
    top:0; 
    right:0; 
    background: #ccc; 
    /* -webkit-transform: translateZ(0); */ 
} 

.fixed{ 
    height:20px; 
    width: 20px; 
    background: red; 
    position: fixed; 
    margin-left: 40px; 
} 

JSFiddle DEMO

Answer 2

你确定你不想红格为position:absolute，而不是固定的吗？例如。

.fixed{ 
    height:20px; 
    width: 20px; 
    background: red; 
    position: absolute; 
    top:0; 
    right:0; 
} 

演示拨弄：http://jsfiddle.net/lparcerisa/osxo8ysw/

从http://www.w3schools.com/css/css_positioning.asp：

固定定位

与固定位置的元素相对于浏览器窗口被定位。

即使窗口滚动

Answer 3

height:20px; 
width: 20px; 
background: red; 
position: fixed; 
right:0px; 
/* adjust manually by margin*/ 
margin-right: 300px; 

read this article

编辑它不会移动

CSS

.relative-wrapper { 
     background-color:#f00; 
     height:500px; 
     overflow:scroll; 
     width: 220px; 
     position: absolute; 
     z-index:0; 
    } 

    .fixed { 
     background-color:green; 
     width: 180px; 
     position: absolute; 
     z-index:1; 
     margin: 3px 10px 10px; 
    } 

HTML

<div class="relative-wrapper"> 
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    </div> 
    <div class="fixed"> 
    Overwrite it the content.. 
    </div>