一般使用四种定位模式

• 相对(relative)定位
• 绝对(absolute)定位
• 固定(fixed)定位
• 粘性(sticky)定位

1.相对(relative)定位

相对于他原来的位置定位 原来的位置继续占有

2.绝对(absolute)定位

相对于祖先元素来说 若没有父元素或父元素无定位 则以浏览器为准定

若父亲无定位 爷爷有定位 那就跟着爷爷定位

不再占有原来位置(脱离标准流)

子级使用绝对定位 父级使用相对定位!!!(子绝父相)

3.固定(fixed)定位

浏览器页面滚动时元素位置不变 以浏览器可视窗口作为参照

脱离标准流

4.粘性(sticky)定位

相对定位和固定定位的混合

以浏览器可视窗口作为参照

原来的位置继续占有

当出现多个盒子定位时:可以用z-index控制盒子前后次序 数值越大 盒子越靠上

拓展

加了绝对定位的盒子不能通过margin:0 auto水平居中

    可以用left:50% ;margin-left:负值往左走 自己盒子宽度的一半

    行内元素添加了绝对或固定定位 可直接设置宽度 高度

    块级元素添加了绝对或固定定位 如不给宽度高度 默认大小是内容大小

    脱标盒子不会触发外边界塌陷

    绝对/固定定位会完全压住盒子

    而浮动元素只会压住它下面标准流的盒子 但是不会压住下面标准流盒子里面的文字(图片)

    (浮动最初产生目的就是做文字环绕图片效果)