.p_wrapper{box-shadow:008px3pxrgba(0,0,0,0.15);宽度：70%；边距：50px自动；最大高度：300px；溢出-y：自动；文本对齐：居中；颜色：#fff;}.fixed_bar{高度：50px;背景色：rgba(111,66,193,1);行高：50px；位置：固定；顶部：100px；宽度：100%；}.sticky_bar{高度：50px；背景色：rgba(111,66,193,1);行高：50px；定位：粘性；top:0;}CSSposition属性用于指定元素在文档中的定位方式。top、right、bottom和left属性确定元素的最终位置。CSSposition属性默认为static静态，此外还有相对定位relative、绝对定位absolute、fixed定位fixed、sticky定位sticky。本文通过一个实际场景来分析一下fixed和sticky的区别。定义Reviewfixed生成固定位置的元素，相对于浏览器窗口定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定。sticky粘性定位，这是基于用户滚动的位置。它的行为类似于position:relative;当页面滚动到目标区域之外时，它的行为类似于position:fixed;并固定在目标位置。（W3C新加入，目前处于WorkingDraft阶段，已被大部分浏览器支持）场景描述页面需要有一个工具栏——fixed_bar，在容器内向上滚动时需要悬浮在容器顶部，分别使用fixed和sticky，如下图：使用fixed定位发现fixed_bar超过了父容器的宽度（即使fixed_bar的宽度设置为父容器的100%），如果你在这个现在的情况，你想让fixed_bar的宽度是parent的100%，那就正好击中了你的痛点。而父容器在向上滚动时，还需要在scroll事件中动态改变fixed_bar的top值——可谓是“麻烦事”。另一方面，粘性定位可以完美满足你的要求，这应该是它出现的原因。如果你对csspositionfixedsticky的在线demo感兴趣，可以去上面的地址体验一下。其他定位方法的Demo贴出我用来演示的代码：颜色：rgba(227,92,64,0.72)">something...
