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

方法一：利用子元素设置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，兼容性不是很好。

解决思路

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

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

实质上是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;
}