相對父項內的固定位置子項與鉻中父項無關

Question

比方說，我的網站上有一個元素與位置相關。並且在這個元素中，我想要一個固定位置的其他元素。

問題：

在所有的瀏覽器（FF，IE，歌劇）和較早鉻瀏覽器的固定元件（在Chrome版本26.0.1410測試）位於相關於母體的相對位置。在當前的chrome瀏覽器（在Chrome版本32.0.1700上測試過），這個固定的孩子被呈現給父母，但沒有考慮父母的相對位置。

的CSS

#parent-element{ 
    border: 1px solid red; 
    height: 100px; 
    position: relative; 
    top: 50px; 
    width: 90%; 
} 

#child-element{ 
    background-color: yellow; 
    height: 100px; 
    width: 100px; 
    position: fixed; 
} 

的HTML：

<div id="parent-element"> 
    <div id="child-element"></div> 
</div> 

JS fiddle, the problem

我目前的解決方案：

目前最好的解決辦法，我發現是定位父不與相對而是w絕對。在這種情況下，父級需要一個容器元素來引用其絕對位置。

的CSS：

#parent-container{ 
    position: relative; 
    height: 100px; 
} 
#parent-element{ 
    border: 1px solid red; 
    height: 100px; 
    position: absolute; 
    top: 50px; 
    width: 90%; 
} 

#child-element{ 
    background-color: yellow; 
    height: 100px; 
    width: 100px; 
    position: fixed; 
} 

的HTML：

<div id="parent-container"> 
    <div id="parent-element"> 
     <div id="child-element"></div> 
    </div> 
</div> 

JS Fiddle, my current solution

我不知道，如果這個解決方案是在所有情況下最好的，如果沒有額外的HTML的解決方案能夠。所以，如果你有其他解決方案或建議我感興趣。

出於好奇，有沒有人知道爲什麼鉻做出這種改變？

• 這是我的第一個問題，所以如果有任何關於這個問題/評論，請讓我知道。

Answer 1

在我看來，你想要「絕對」的位置值而不是「固定」的值，不知道爲什麼/當一個變化會發生，但根據w3c - 修正：元素相對於瀏覽器窗口。 http://www.w3schools.com/cssref/pr_class_position.asp

http://jsfiddle.net/9q3v6/3/

#parent-element{ 
    border: 1px solid red; 
    height: 100px; 
    position: relative; 
    top: 50px; 
    width: 90%; 
} 
#child-element{ 
    background-color: yellow; 
    height: 100px; 
    width: 100px; 
    position: absolute; 
}