台灣最大程式設計社群網站
線上人數
791
 
會員總數:245973
討論主題:189551
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> 【CSS】子div固定在父div中不隨捲軸移動
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
【CSS】子div固定在父div中不隨捲軸移動
價值 : 50 QP  點閱數:1746 回應數:2
樓主

吳俊翰
門外漢
0 1
40 2
發送站內信

上網都找遍過了
都知道父要設定position:relative
子要設定position:fixed

但都不是我要的
因為它的效果都是固定於整個頁面(整個瀏覽器畫面)
而不是固定於父DIV中

請問要怎麼固定於父DIV中呢??

【示意圖】



怎麼會還是在那個定點呢 = =
他沒有在父DIV裡面阿...

【程式碼】
<body>
<div id="father" style="width:150px;height:100px;overflow:auto;position:relative;margin:50px;">
 <div id="child" style="position:fixed;background:#ccc">這是子DIV內容</div>
 <div id="child2">其他子內容<br/>其他子內容<br/>其他子內容<br/>其他子內容<br/>其他子內容<br/>其他子內容</div>
</div>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
<p>其他內容</p>
</body>

本篇文章發表於2015-02-11 22:36
1樓
最有價值解答

clouding
捐贈 VP 給 clouding 檢舉此回應
早安
因為 position:fixed 改成這個屬性之後
不會管父div
就以整個 視窗位置 來定位

可以在最外層 直接以 position:absolute 來定位
設定 z-index 圖層順序 讓他覆蓋 在 子div上






本篇文章回覆於2015-02-12 09:14
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

Hank
檢舉此回應
太謝謝你了!! 解決了我的問題~~
本篇文章回覆於2015-02-14 04:31
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.