静态定位 position:static;

静态定位是默认定位,元素会按照正常流流的位置进行渲染,它没有边偏移

相对定位 position:relative;

固定定位 position:fixed;

固定定位将元素固定在浏览器可视区域的特定位置。其典型应用场景是:当页面滚动时,元素的位置保持恒定不变。

1.以浏览器的可视窗口为参照点移动元素。

- 跟父元素没有任何关系

- 不随滚动条滚动。

2.固定定位不占有原先的位置(脱标)。

粘性定位 position:sticky;

粘性定位是固定定位相对定位的结合体。

粘性定位的特点:

1.以浏览器的可视窗口为参照点移动元素(固定定位特点)

2.粘性定位占有原先的位置(相对定位特点)

3.必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差,IE不支持。

静态定位

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的

相对定位

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的

1,若无祖先元素或祖先元素未设置定位,则以浏览器视口为基准进行定位(即相对于 Document 文档)

2.若祖先元素已设置定位,则以距离最近的、具有定位属性的祖先元素作为参考点进行位置偏移

3.绝对定位会脱离标准文档流(脱标),元素原先占据的空间将不再保留

定位又诀:子绝父相(子元素绝对定位,父元素相对定位)

定位又诀:子绝父相(子元素绝对定位,父元素相对定位)

绝对定位会脱标

固定定位(脱标)

粘性定位