静态定位是默认定位,元素会按照正常流流的位置进行渲染,它没有边偏移
固定定位将元素固定在浏览器可视区域的特定位置。其典型应用场景是:当页面滚动时,元素的位置保持恒定不变。
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位不占有原先的位置(脱标)。
粘性定位是固定定位和相对定位的结合体。
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差,IE不支持。
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
1,若无祖先元素或祖先元素未设置定位,则以浏览器视口为基准进行定位(即相对于 Document 文档)
2.若祖先元素已设置定位,则以距离最近的、具有定位属性的祖先元素作为参考点进行位置偏移
3.绝对定位会脱离标准文档流(脱标),元素原先占据的空间将不再保留
定位又诀:子绝父相(子元素绝对定位,父元素相对定位)
定位又诀:子绝父相(子元素绝对定位,父元素相对定位)