元素根据父级固定定位效果

css中的：fixed一般用来设置元素的固定定位，它的定位方式是依据窗口固定某个位置，在滚动滚动条的时候会一直固定在某个位置。
在开发过程中我们经常会遇到这样的效果：某个元素有滚动条，它的一个子元素需要固定在这个元素的可视区域的某个位置，不随着滚动条的拖动跟随移动。要实现这样的效果最先想到的就是使用position:fixed但是它并不能实现我们上边说的这种效果，经过反复实验总结除了两种实现此效果的方法：

第一种：使用position:absolute；来实现具体思路

首先我们要知道position:absolute的定位方式依据最近的上级有position:relative定位的元素进行绝对定位。更具这意思了我们可以实现上边说的效果，具体实现思路是：

我们看上图，蓝色框的盒子是最外层的盒子，给改盒子设置一个相对定位属性position:relative，然后他里边包裹一个红色盒子也就是方式所有内容的盒子，他不设置定位属性，但是它需要设置一个宽度和高度，来实现内容多的时候的左右上下滚动条，绿色框起来的是内容区的盒子，放置具体的内容，如果内容过多超出了红色盒子的宽度高度，红色盒子就会出现滚动条。需要固定定位的元素和绿色盒子同级，也就是那个在线客服按钮，然后给他设置一个绝对定位属性：position:absolute然后它的定位是依据祖先元素蓝色盒子来定位的，这样即便他属于红色盒子的子元素，红色盒子有滚动条，拖动滚动条那个在线客服按钮也不会跟随滚动条往上或者向左滚动，这样就实现了我们想要的效果。具体代码：

<div class="ancestors-box">
    <div class="parent-box">
        <div class="sub-box">
            <span>在线客服</span>
        </div>
        <div class="con-box">
            <ul>
                <li>新闻列表1</li>
                <li>....</li>
            </ul>
        </div>
    </div>
</div>
<style>
.ancestors-box{
    display: inline-block;
    margin: 100px;
     /*关键代码*/
    position: relative;
    /* 或者不设置相对定位，设置css3属性也能实现 */
    /* transform: translateZ(0) */
}
.parent-box{
    width: 500px;
    height: 500px;
    overflow: auto;
    background-color:#fff;
}
.sub-box{
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    background-color:#09c;
    color:#fff;
    text-align: center;
    line-height: 100px;
    transition: box-shadow .5s ease;
    cursor: pointer;
}
.sub-box span{
    display: inline-block;
    width: 40px;
    line-height: 1.5;
    font-size: 20px;
    margin-top: 20px;
}
.sub-box:hover{
    box-shadow: 0 0 10px rgba(0, 0, 0, .8);
}
.con-box{
    width: 600px;
}
.con-box li{
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}
</style>

此方式的实现缺点在于父元素不能设置绝对定位属性。

第二种：还是使用fixed固定定位属性

这里如果还是想用固定定位属性进行设置，就需要借助css3的一些辅助属性来实现固定定位依据设置了css3的transform属性的祖先元素进行固定定位，这里的html代码结构还是和上边的一样，只不过是把绝对定位改成固定定位，同时给祖先元素设置css3的属性，代码如下：

<div class="ancestors-box">
    <div class="parent-box">
        <div class="sub-box">
            <span>在线客服</span>
        </div>
        <div class="con-box">
            <ul>
                <li>新闻列表1</li>
                <li>....</li>
            </ul>
        </div>
    </div>
</div>
<style>
.ancestors-box{
    display: inline-block;
    margin: 100px;
    transform: translateZ(0)
}
.parent-box{
    width: 500px;
    height: 500px;
    overflow: auto;
    background-color:#fff;
    /*这里就可以给父元素设置相对定位了，这样里边的其他自选元素还可以按照此定位设置绝对定位*/
    position:relative;
}
.sub-box{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    background-color:#09c;
    color:#fff;
    text-align: center;
    line-height: 100px;
    transition: box-shadow .5s ease;
    cursor: pointer;
}
.sub-box span{
    display: inline-block;
    width: 40px;
    line-height: 1.5;
    font-size: 20px;
    margin-top: 20px;
}
.sub-box:hover{
    box-shadow: 0 0 10px rgba(0, 0, 0, .8);
}
.con-box{
    width: 600px;
}
.con-box li{
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}
</style>

这个方法的好处在于，可以给父元素设置相对定位，如果里边还有其他绝对定位的元素需要依据父元素绝对定位，是可以可固定定位元素同时设置的。