position:fixed 默認是相對瀏覽器窗口定位的,怎麼實現相對父級元素定位呀?父級設置position:relative不管用.

01-14

fixed定位相對父級容器定位，不添加:top,bottom,left,right樣式，通過margin定位

給父元素加上 transform:translate(0,0) ，fixed即可根據父容器定位。

參考自：如果父級元素設置了transform屬性，position:relative/absolute/fixed會基於此定位，詳細請參考：transformedelement creates a containing block for all its positioned descendants

添加一層祖先元素專用於定位，原先的父元素用於負責展示內容就可以實現"相對於父元素"fixed"定位"的效果了。

假設想實現child元素相對於parent「固定」定位的效果，這是具體實現：

HTML:

& & & && && & &

CSS:

/* 注意將assistor和parent的大小設置為一樣大*/ .assistor { position: relative; /*關鍵點*/ width: 500px; height: 300px; } .parent { width: 500px; height: 300px; overflow: auto; /*關鍵點*/ } .child { position: absolute; /*關鍵點*/ width: 120px; height: 120px; } .placeholder { width: 1000px; height: 1000px; }

更詳細的說明可以看這裡：相對於父元素的fixed定位的實現 - byss - 博客園

-------------------------------------------分割線-------------------------------------------

根據評論區 @張晨楓的例子做一個詳細的補充說明：

這樣來理解(裡面的詞語都是為了方便理解編的)：把滾動分成兩個部分，一部分是"滾動主體"，就是隨著滾動條的拖動，位置會改變的部分，另一部分是"滾動容器"，它的位置不隨滾動主體的滾動變化，它本身是滾動主體的容器。

在我的例子中，HTML結構本來是這樣的.parent&>(.child+.placeholder)，其中.parent就是滾動容器，.placeholder是滾動主體，.child是我們希望相對於.parent固定定位的目標。

為了實現這個目的，我的做法是引入一個與滾動容器同樣大小的.assistor作為.parent的包裹層，之後讓.child相對於這個包裹層進行absolute定位，這樣在滾動主體.placeholder進行滾動時，它只會在滾動容器.parent裡面滾動，就不會造成.child的位置變化，以此實現了視覺上的相對於父元素fixed定位。

再來看評論區提供的例子 -- 營銷活動管理系統，(如果評論區的這個例子以後掛了，請需要的同學喊我來補一個)，首先找滾動主體，在提供的例子中，body元素被.main_content撐開了高度，所以body元素在滾動條下拉時會進行滾動，因此body是滾動主體，在這種情況下，顯然找不到比body更外層的滾動容器了，因此我的方法不適用，反而在body是滾動主體的時候，直接使用fixed定位會更加便捷。

那如果非要在這個例子中用我的方法行不行？答案是可以的：首先，body不能再像之前一樣作為滾動主體了，也就是說它不能發生滾動，其中一種辦法比如是：設置body元素為fixed定位，之後設置其top、right等四個值為0，這樣body就正好鋪滿整個屏幕，再不會發生滾動了。之後，尋找新的滾動主體，在幾個內容塊中.top和#edit都是不滾動的，只有 .main_content 發生滾動，因此 .main_content 是滾動主體，這時可以把.main作為滾動容器，換句話說.main也不能參與滾動，那麼設置.main高度為100%和body一樣。這時候尋找合適的包裹層用於輔助#edit的定位，可以發現body作為.main的父元素，是一個非常合適的包裹層。

最終的方法是：

body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .main { height: 100%; overflow: auto; } #edit { display: inline-block; width: auto; position: absolute; top: 72px; right: calc(50% - 612px); }

這樣就實現了編輯按鈕"相對於父元素的fixed定位"，但就像剛才說的，例子中這種情況本身就比較適合直接fixed定位，所以按我現在寫的樣式是不夠美觀的，滾動條到了.main裡面去，也許優化下也會沒什麼問題，不過這種情況還是直接fixed來的方便。

總結一下就是：先找滾動主體，再找滾動容器，之後為滾動容器添加一層包裹層作為定位的輔助，最後讓定位元素相對於包裹層.assistor定位就好了。

相對於父級的fixed...不就是absolute么..（父級要先設定除static以外的定位）。

今天正好也遇到了這個問題。

其實還有一個選項，即sticky

詳細您可以參考MDN上的解釋：Position:sticky

同問知乎就有這樣的功能但是模仿不出來難受

相對父元素定位的是position：absolute;

absolute會根據最相近的已定位的祖先元素定位

請問樓主，這個問題解決了沒有呀，我也遇到這個問題了，不知道怎麼解決，江湖救急，謝謝。

不知道這個是怎麼實現的，反正它就辦到了。

javascript - bootstrap modal 子元素定位為什麼是基於模態框？