今天在做css定位的时候遇到一个问题，我想用fixed定位下来，但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百，这个就很尴尬了，也不能固定宽度吧，毕竟还要宽度自适应。这个时候发现了一个position的属性-----sticky它是relative和fixed的结合体可以理解为，当我们屏幕还没有滚动出原有的范围的时候就跟relative一样，正常排列在那里，当我们屏幕滚动出去了这个时候就fixed，常用语头部或者底部一个吸顶的行为，最最关键的是，他不会像fixed一样把他的父级变成浏览器可视区域，还是你的父级

今天在做css定位的时候遇到一个问题，我想用fixed定位下来，但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百，这个就很尴尬了，也不能固定宽度吧，毕竟还要宽度自适应。这个时候发现了一个position的属性-----sticky它是relative和fixed的结合体可以理解为，当我们屏幕还没有滚动出原有的范围的时候就跟relative一样，正常排列在那里，当我们屏幕滚动出去了这个时候就fixed，常用语头部或者底部一个吸顶的行为，最最关键的是，他不会像fixed一样把他的父级变成浏览器可视区域，还是你的父级

在刚开始学习CSS的时候，我们都知道固定定位：固定定位（position:fixed;）其实是绝对定位定位的子类别，一个设置了position:fixed的元素相对于视窗是固定的，就算页面文档发生了滚动，它也会一直待在相同的地方但是在实际项目中却遇到了明明使用了fixed定位，但该元素却没有按照期望基于屏幕视口（viewport），而是依据了它的祖先元素。image.png排查原因，发现该元素定位依赖的祖先元素设置了transform属性，尝试去除该属性，fixed定位恢复正常。查阅了相关文档，发现transform属性确实是有副作用的：transform的元素会影响overflowarea(

在刚开始学习CSS的时候，我们都知道固定定位：固定定位（position:fixed;）其实是绝对定位定位的子类别，一个设置了position:fixed的元素相对于视窗是固定的，就算页面文档发生了滚动，它也会一直待在相同的地方但是在实际项目中却遇到了明明使用了fixed定位，但该元素却没有按照期望基于屏幕视口（viewport），而是依据了它的祖先元素。image.png排查原因，发现该元素定位依赖的祖先元素设置了transform属性，尝试去除该属性，fixed定位恢复正常。查阅了相关文档，发现transform属性确实是有副作用的：transform的元素会影响overflowarea(