网页常见布局方式

注：标准流和浮动在以往提及故忽略

定位的应用场景

1. 解决盒子与盒子之间的层叠问题
2. 可以让盒子始终固定在屏幕中某一个位置

使用定位的步骤

相对定位

绝对定位

注意：使用子绝父相，须保证width,heigth的值是设立的

举例


结果图

定位居中

方法1

效果图

优缺点：这个方法虽然解决了定位居中的问题，但是对于实际开发并不友善，原因在于当盒子的宽度改变时，我们需要重新设置margin-left和margin-top的值

方法2（位移居中）

效果图

优缺点
这种方法同样能解决定位居中的问题，唯一不同的是，这种方法更符合开发的规格，transform:translate(-50%,-50%)解决方法1问题的关键语句

固定定位

注意 :一定要设置宽和高

元素的层级关系

效果图

元素整体透明度