問題描述
之前在專案中，遇到了乙個場景，需要實現相對于父元素的fixed定位：在父元素內拖動滾動條時，"fixed"定位的元素不能滑動，在外層拖動滾動條時，父元素及父元素內的所有元素跟著一起滑動。但是position: fixed是相對於視窗進行的定位，不能直接實現我們需要的效果。在網上搜尋看到乙個還不錯的解決方案，不過利用了css3的transform，相容性不是很好。
解決思路
?這是我們希望的效果，但是沒法直接實現
我們想讓特定子元素相對于父元素"fixed"定位，也就是說，剩餘的子元素不定位。那我們可以分開來想，如果新增乙個祖先元素assistor，有兩個祖先元素，乙個用於輔助定位，乙個用於包裹不定位的內容，這個問題不就解決了嗎。像這樣?
實質上是child相對於assistorabsolute定位，parent內的內容自己負責展示。只要assistor和parent一樣大，看起來就像是子元素child相對于父元素parent固定定位了。具體原理是position: absolute;的元素會相對於第乙個設定了position: relative;的祖先元素進行定位，我們將assistor設定為position: reletive;，滾動條是在parent中的，這樣"fixed"定位和parent內的內容滾動就都實現了。
最終**
html:
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;
fixed不以body定位，相對於父級容器定位問題
經常在做乙個頁面的時候，希望乙個元素不希望隨著滾動條的滾動而動，這個時候就要用到fixed了 但是又不希望它根據整個視窗的左右兩邊定位 因為如果解析度變小了，它與中間頁面的距離就會變了 希望達到的效果如下圖所示 解決方法 只需要使用margin定位就可以了 如圖，最先開始使用left,right進行...
css中子元素相對于父元素定位
1 參照定位的元素必須是相對定位元素的前輩元素 相對參照元素進行定位 從上面 可以看出box1是box2的父元素 父元素當然也是前輩元素了 2 參照定位的元素必須加入position relative box13 定位元素加入position absolute，便可以使用top bottom lef...
使元素相對於視窗或父元素水平垂直居中的幾種方法
如果乙個元素具有固定或相對大小，要使其不管如何調整視窗大小或滾動頁面，始終位於瀏覽器視窗中間，可使用如下方法 效果如圖 那如何讓乙個元素相對於其父元素水平垂直居中呢？首先，要把元素的position屬性值改為absolute，使其有可能相對于父元素定位，而不是相對於瀏覽器視窗定位。absolute指...