CSS定位

网页常见布局方式

1.标准流

块级元素独占一行——垂直布局

行内块元素/行内元素——一行显示多个——水平布局

2.浮动

可以让原本垂直布局的块级元素变成水平布局

3.定位

可以让元素自由的摆放在网页任何位置

一般用于盒子之间的层叠情况

使用定位的步骤

1.设置定位方式

属性名：position

常见属性值：相对定位   relative    绝对定位   absolute    固定定位  fixed

2.设置偏移值

水平，垂直各选一个

就近原则：离哪边近用哪个

相对定位

相对于自己之前的位置进行移动

代码

position：relative

特点：

相对于自己原来位置进行移动

在页面中占位置——没有脱标

应用场景：

配合绝对定位（子绝父相）

小范围的移动

代码展示

效果展示 

定位前

定位后 

*注意点：

1.占有原来的位置

2.仍然具有标签原来的显示模式特点

3.改变位置参照自己原来的位置

4.如果left和right都设置，以left为准，top和bottom都有，以top为准

绝对定位

相对于非静态定位的父级元素进行定位移动

代码：position：absolute

特点：

默认相对于浏览器窗口进行移动

在页面中不占位置——已经脱标

改变标签显示模式特点：具备行内块特点（在一行共存，宽高生效）

代码展示

效果展示

 

*注意点：

1.绝对定位的盒子不能使用左右margin auto居中

2.可以用transform：translate（-50%，-50%）