定位布局

什么是定位布局

可以通过上下左右四个方位完成自身布局的布局方式。

关键字:position(static|relative|absolute|fixed)

在通过top|bottom|left|right 进行定位。

注意点:当css样式中left和right共存的话采用left定位,top和bottom采用top定位。

文档流:

浏览器默认设置

position:static

相对定位:

参考系:自身原有位置,并不会脱离文档流,原有的位置依旧占据。

position:relative

1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流

绝对定位

参考系:最近的定位父级

position: absolute; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流

固定定位:

参考系:整个html页面

position: fixed; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流

z-index

修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

原文地址:https://www.cnblogs.com/msj513/p/10104527.html