如何使fixed元素相對於父元素定位

嘗試方案

父元素relative定位，子元素fixed，但是沒法直接實現

 

解決方案

我們想讓特定子元素相對於父元素"fixed"定位，也就是說，剩余的子元素不定位。

那我們可以分開來想，如果添加一個祖先元素assistor，有兩個祖先元素，一個用於輔助定位，一個用於包裹不定位的內容，這個問題不就解決了嗎。像這樣👇

child是我們要定位的元素

具體原理：child：{absolute}的元素會相對於assistor：{relative}的祖先元素進行定位

我們將assistor設置為position: reletive;，滾動條是在parent中的，這樣"fixed"定位和parent內的內容滾動就都實現了。

最終代碼

HTML:

<div class="assistor">
  <div class="parent">
    <div class="child"></div>
    <div class="placeholder"></div>
  </div>
</div>

 

CSS:

.assistor {
  position: relative; /*關鍵點*/
  display: block;
  width: 500px;
  height: 300px;
  margin: 100px auto 0 auto;
  background-color: #ddd;
}
.parent {
  width: 500px;
  height: 300px;
  background-color: #888;
  overflow: auto; /*關鍵點*/
}
.child {
  position: absolute; /*關鍵點*/
  width: 120px;
  height: 120px;
  margin: 100px 50px;
  background-color: #333;
}
.placeholder {
  width: 1000px;
  height: 1000px;
}