相對於父容器的固定位置

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>