元素position定位

作者: kevin_lln | 来源:发表于2022-05-07 00:00 被阅读0次

CSS中的position属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position属性有五个可选值，分别对应5种不同的定位方式，如下所示：

值	说明
static	默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时top、bottom、left和right4个定位属性也不会被应用。
relative	相对定位，即相对于元素的正常位置进行定位，可以通过top、right、bottom、left这4个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
absolute	绝对定位，相对于非static定位的父级元素进行定位，可以通过top、right、bottom、left这4个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口进行定位。使用绝对定位的元素不会对其它元素造成影响，
fixed	固定定位，相对于浏览器的创建进行定位，可以使用top、right、bottom、left这4个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky	粘性定位，它是relative和fixed的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与relative相同，当要滚动到屏幕之外时则会自动变成fixed的效果。