HTML中的定位方式

1.固定定位

position：fixed;

固定定位相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。最常用的就是电脑里面弹出的小广告，如果你不关掉它，当滑动鼠标查看网页时，小广告一直会在那里，还有常用的就是网站或者APP的导航栏和底部的选择栏。

2.粘性定位

position: sticky;

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会以相对定位的形式显示，直到在视口中遇到给定的偏移位置 ，然后将其“粘贴”在适当的位置（比如 position:fixed）。

3.静态定位

position: static;

HTML 元素默认情况下的定位方式为 static（静态），静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

4.相对定位

position：relative；

相对定位的参照点是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。

5.绝对定位

position：absolute；

绝对定位是相对于已定位的并且包含关系最近的祖先元素来定位的，如果父元素都没有设置定位，就相对于body。

绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。

部分内容来源网络 如有侵权联系删除

打开网易新闻 查看精彩图片