1. 程式人生 > >讓一個元素相對於父元素固定定位

讓一個元素相對於父元素固定定位

但是 ren -c 所有 展示 子元素 需要 不能滑動 play

之前在項目中,遇到了一個場景,需要實現相對於父元素的fixed定位:在父元素內拖動滾動條時,"fixed"定位的元素不能滑動,在外層拖動滾動條時,父元素及父元素內的所有元素跟著一起滑動。但是position: fixed是相對於窗口進行的定位,不能直接實現我們需要的效果。

我們想讓特定子元素相對於父元素"fixed"定位,也就是說,剩余的子元素不定位。那我們可以分開來想,如果添加一個祖先元素assistor,有兩個祖先元素,一個用於輔助定位,一個用於包裹不定位的內容,這個問題不就解決了嗎。像這樣

實質上是child相對於assistorabsolute定位,parent內的內容自己負責展示。只要assistor和parent一樣大,看起來就像是子元素child相對於父元素parent固定定位了。具體原理是position: absolute;

的元素會相對於第一個設置了position: relative;的祖先元素進行定位,我們將assistor設置為position: reletive;,滾動條是在parent中的,這樣"fixed"定位和parent內的內容滾動就都實現了。

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

  

.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;
}

  

讓一個元素相對於父元素固定定位