滾動上的可移動div

Question

<div id="blue"> 
    <div id="red"></div> 
</div> 

我想讓這個紅色div在滾動的藍色div內移動。

它不應該永遠不能退出藍色的div。

有代碼：http://jsfiddle.net/zhQZt/2/

我希望你明白我的意思是......

Answer 1

你可以用一些聰明的定位和z-index的，使它看起來像紅色的div實現，這是包含在藍格內。一個新的div添加了一個更高的z-index值，然後是紅色框，當紅色框溢出時，背景顏色將隱藏紅色框。

新建CSS：

#continue { 
background:white; 
position:relative; 
z-index:2; 
height:100%; 
width: 200px; 

} 
#blue { 
    height:300px; 
    width:200px; 
    background:blue; 

position:relative 
} 

#red { 
    height:50px; 
    width:200px; 
    position:fixed; 
    background:red; 
    overflow:hidden; 
    z-index:1; 
}​ 

新的HTML：

<div id="blue"> 
<div id="red"> 
</div> 
</div> 
<div id="continue"> 
<!--Your line breaks --> 
</div>​ 

參見工作示例中的jsfiddle：http://jsfiddle.net/zhQZt/5/

Answer 2

你正在尋找的是overflow: scroll;的CSS代碼，這裏解釋：http://www.w3schools.com/cssref/pr_pos_overflow.asp。

#blue { 
    height:300px; 
    width:200px; 
    background:blue; 
    overflow: scroll; 
} 

#red { 
    height:50px; 
    width:250px; 
    background:red; 
} 

http://jsfiddle.net/zhQZt/2/