css中position:fixed如何实现相对于父级定位

 在项目开发中我们经常会用到position:fixed属性，它常常应用的场合是，当下拉滚动条时固定导航栏到顶部，将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时，它生成绝对定位的元素，是相对于浏览器窗口定位的，所以只需要定义top，bottom，left，right属性即可，但是我们要针对于父级定位该怎么实现呢。要实现相当...

在项目开发中我们经常会用到position:fixed属性，它常常应用的场合是，当下拉滚动条时固定导航栏到顶部，将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时，它生成绝对定位的元素，是相对于浏览器窗口定位的，所以只需要定义top，bottom，left，right属性即可，但是我们要针对于父级定位该怎么实现呢。

要实现相当于父元素定位，可以这样：
不设置fixed元素的top，bottom，left，right，只设置margin来实现它的偏移位置。这种方法本质上fixed元素还是相当于窗口定位的，实现效果上是相对于父元素定位。
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css中position:fixed如何实现相对于父级定位</title>
        <style>
            body{ margin: 60px;}
            .parent{ 
                width: 200px; 
                height: 300px;
                background: #66a2ff; 
                position: relative;
            }
            .child{ position: fixed;
                width: 100px;
                height: 300px;
                background: #ffd266;
                margin-left: 210px;/*居父级左边偏移210px*/
            }
        </style>
    </head>
    <body>
        <div class="parent">
          <div class="child"></div>
        </div>
    </body>
</html>