方法一:利用子元素设置position:fixed后由于transform导致的相对视口定位失效bug引起的fixed相对于父级定位


首先,大家都清楚,元素使用fixed之后,若不设置top与left则会相对于最近的使用定位的父元素,并位于父元素的原点位置设置top与left值时,则会相对于窗口定位。但无论如何,此时仍相对于窗口定位,在此不过多描述。

今天发现的是当某一元素使用transform属性后,其所有使用fixed定位的子元素的fixed属性都会失效。此处可查看W3C文档 https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c

因此可以利用此bug时fixed元素相对于父级定位,而非相对于窗口定位。

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



在此需要注意,当inter元素设置top与left值时,则会相对于outer之外最近的使用定位的元素,而非相对于outer元素。



*{
    padding: 0;
    margin: 0;
}
body{
    height: 500px;
}
.wrapper{
    width: 400px;
    height: 400px;
    background: #c0c0c0;
    position: relative;
    top:50px;
    left: 50px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
.parent{
    position: relative;
    width: 400px;
    height: 400px;
    background: #ff0;
    overflow: auto;
}
.child{
    position: fixed;
    width: 200px;
    height: 200px;
    background:#f00;
    right: 50px;
    bottom: 50px;
}
.placeholder {
  width: 1000px;
  height: 1000px;
}





方法二:利用子元素设置position:absolute后会相对于第一个设置了relative的元素定位来保持位置


原理:子元素要固定设置absolute,父元素不设置position,但是设置overflow可以滚动,父元素的包裹元素设置relative,父元素大小与其包裹元素一致,这样子元素相对于父元素的包裹元素固定(absolute相对于第一个设置了relative的元素定位),不管子元素的兄弟元素如何变化,该子元素位置不变。


问题描述

position: fixed是相对于窗口进行的定位,不能直接实现我们需要的效果。在网上搜索看到一个还不错的解决方案,不过利用了CSS3的transform,兼容性不是很好。

解决思路

?这是我们希望的效果,但是没法直接实现

css中如何设置相对父容器固定定位_css中如何设置相对父容器固定定位

我们想让特定子元素相对于父元素"fixed"定位,也就是说,剩余的子元素不定位。那我们可以分开来想,如果添加一个祖先元素assistor,有两个祖先元素,一个用于辅助定位,一个用于包裹不定位的内容,这个问题不就解决了吗。像这样?

css中如何设置相对父容器固定定位_css_02

实质上是child相对于assistorabsolute定位,parent内的内容自己负责展示。只要assistor和parent一样大,看起来就像是子元素child相对于父元素parent固定定位了。具体原理是position: absolute;的元素会相对于第一个设置了position: 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;
}