位置固定元素總是在div內

Question

我需要能夠在div內始終放置固定元素。 調整窗口大小時發生問題。然後，固定div總是浮動在所有其他元素之上。如何防止呢？我需要這個div是固定的，但定位在div中。

下面是一個例子：

<div id="main"> 
    <div id="one" style="background-color:yellow;"></div> 
    <div id="two" style="background-color:black;"></div> 
    <div id="three" style="background-color:yellow;"> 
     <div id="four"></div> 
    </div> 
</div> 

CSS：

#main 
{ 
    position:relative; 
    width:1200px; 
    top:0; 
    bottom:0; 
    left:100px; 
} 
#one,#two,#three 
{ 
    position:relative; 
    width:100px; 
    height:1000px; 
    float:left; 
    top:0; 
    bottom:0; 
} 
#four 
{ 
    position:fixed; 
    top:50px; 
    background-color:blue; 
    width:100px; 
    height:200px; 
} 

EXAMPLE嘗試移動水平滾動左，右，你會看到發生了什麼。

Answer 1

將位置改爲相對。

例

#four { 
    background-color: blue; 
    height: 200px; 
    position: relative; 
    top: 50px; 
    width: 100px; 
} 

Answer 2

退房this answer on a similar question。不幸的是，你面臨的問題是單靠CSS無法解決的問題。