Fixed Positioned Div Inside Div

我有一個div position:fixed;，我的問題是固定的位置相對於所有的頁面，我需要固定div保留在頁面中居中的其他div，並且在頁面中使用margin。所以當我向下滾動頁面時，我總想看到div在同一位置）。Fixed Positioned Div Inside Div

我使用jquery插件StickyScroll但我無法使它在Internet Explorer中工作。

解決方案可能是在jQuery/JavaScript，CSS。

謝謝

來源

2011-06-08 Sbml

的固定把定義是，它是相對於瀏覽器窗口的位置。 – joakimdahlstrom 2011-06-08 13:49:35

IE的哪個版本？ IE6和更低版本不支持位置：固定，所以它不會工作。 StickyScroll頁面警告：「我們使用位置：固定樣式粘滯元素，所以IE6不支持」 – 2011-06-08 13:52:17

我只需要在IE 8中工作，但我的頁面和StickyScroll演示程序不能在IE中工作.. – Sbml 2011-06-08 14:09:08

然後你不想固定定位，但絕對定位。

將position: absolute;設置在要定位的元素上。在居中的div上設置position: relative;，這樣它就變成了一個可以在其中定位元素的圖層。

來源

2011-06-08 13:48:04 Guffa

不，你不明白我的問題，我想要一個固定div的相同行爲（如果我向下滾動頁面，我總是看到div），但在一個容器內。 – Sbml 2011-06-08 13:57:04

@Sbml聽起來很矛盾。 – joakimdahlstrom 2011-06-08 14:04:39

爲什麼矛盾，該網站有900px寬度，邊距自動。我有一個div的說明，所以當我向下滾動頁面時，我總想看到div。如果我把例如左：300在我的1280x800顯示器中，在1920x1200的屏幕上，div保持在網頁邊緣之外... – Sbml 2011-06-08 14:20:57

你肯定不需要jQuery或JavaScript來實現這一點。這是你所需要的： HTML：

<div class="outer"> 
    <div class="inner">some text here 
    </div> 
</div>

CSS：

.outer { 
    width:200px; 
    height:600px; 
    background-color:red; 
    margin:0 auto; 
} 
.inner { 
    width:50px; 
    border:1px solid white; 
    position:fixed; 
}

看一看這樣的：http://jsfiddle.net/2mYQe/1/

來源

2011-06-08 13:57:59

但是，如果我想讓內部div修復紅色外部容器內的右側，這將如何工作？ – 2013-01-17 16:38:23

喬治只是變化不大Katsanos代碼可能對某些人有幫助之一。

.outer { 
    width:200px; 
    height:300px; 
    background-color:red; 
    margin:0 auto; 
    overflow:auto;  
} 

.inner { 
    width:182px; 
    border:1px solid white; 
    position:absolute; 
    background-color:buttonface; 
}

樣品在：http://jsfiddle.net/2mYQe/480/

來源

2012-07-25 06:48:01

很久以前。絆倒同樣的事情。雖然這個解決方案有一個問題。你不會看到列表中的第一項，因爲絕對定位的內部div在它之上。（改變五號小提琴中的第一個和第二個「物品名稱」） – Seb 2015-11-26 13:53:42

正確的解決方法是「柔性」。自從原文發佈以來已經有3年了，所以我打算假設我們可以忽略IE8支持，轉而支持支持該解決方案的更新型瀏覽器。

許多人在這裏已經注意到每個提出的解決方案都面臨着問題。從內容區域中的第一項隱藏於絕對位置的標題或內容區域消耗父級的全部高度意味着內容區域的底部被切斷的風險，除非您從其整體高度中減去標題（例如height：calc（100％ - 「header height」px），這意味着你在你的CSS中有硬編碼的值......不好，或者滾動條被設置在父級別，這意味着標題正在爲房地產。

爲了避免這些黑客的解決方案使用「靈活」的解決方案。

<div style="width: 200px; float: right; border: 1px solid black; 
    display: flex; flex-direction: column;"> 
    <div style="width: 100%;"> 
     <div style="width: 100%;"> 
      I'm a header 
     </div> 
    </div> 

    <div style="width: 100%; height: 100%; overflow:auto;"> 
     <div style="height:900px; background-color:lavender;">content area</div> 
    </div> 
</div>

來源

2017-08-23 15:52:22 spyder1329

Fixed Positioned Div Inside Div

回答

相關問題