CSS定位中的Fixed,relative,absolute,sticky定位区别
CSS定位中的Fixed,relative,absolute,sticky定位区别
相对定位
没有脱离文档流，相对于原来的位置。
position: relative;
top: 20px;
right: 20px;
绝对定位
脱离文档流了，（相对于父元素。一般是以<body>为参考的，但若父容器设置了相对或者绝对定位，就以父元素为主）（控制堆叠顺序 ( z-index )注意，没有单位·`）
position: absolute;
top: 20px;
left: 20px;
固定定位
脱离文档流了，（相对于浏览器窗口，设置后，不管滚动条怎么滚动，位置都在不变 。）
position: fixed;
top: 20px;
left: 20px;
黏性定位
（当页面滚动未超出目标区域时，它的行为就像 position:relative; 。当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。当元素位置固定在目标区域时，会受其直接父元素影响）
position: sticky;
top:60px;
left: 30px;
版权声明
本站部分原创文章，部分文章整理自网络。如有转载的文章侵犯了您的版权，请联系站长删除处理。如果您有优质文章，欢迎发稿给我们！联系站长：
愿本站的内容能为您的学习、工作带来绵薄之力。
评论