Position：
Static：静态定位
Relative：相对定位，相对自己原来的位置偏移，原来位置还是会保留在自然流/常规流中，心系家乡。（老家有套房子，想回来的时候随时可以回来）
Absolute: 绝对定位, 脱离文档流定位，如果没有父容器，会认body为父元素，同样利用lrtb属性来控制偏移，原来位置不会保留在自然流中。（把老家房子卖了...）
变异特性：父容器设置relative（相对定位），子元素设置absolute（绝对定位）
- 子元素没有设置宽高，将lrtb设置为0，子元素会填充满整个父元素。
- 子元素设置宽高，不设置左右偏移，只设置上下偏移为0，并将margin上下设置为0，左右auto，子元素会水平居中父元素
- 子元素设置宽高，不设置上下偏移，只设置左右偏移为0，并将margin左右设置为0，上下auto，子元素会垂直居中父元素
- 子元素设置宽高，设置上下左右偏移都为0，并将margin设置为上下auto，左右auto，子元素会水平垂直居中父元素
fixed：固定定位，不会随着视口的滚动而滚动，和absolute的性质是一样的，在没有relative的情况下，都是脱离常规流，相对于body定位。
sticky：磁铁定位/粘性定位/吸附定位，是relavtive和fixed的完美结合，制造出吸附效果。
- 比如：导航栏需要随着用户的滑动固定在顶部，而不会离开用户的视口，方便用户操作就需要用到这个sticky定位。
- 用法：设置position：sticky 设置top：0 。（吸附在顶部） 左右同理。
网页布局：
常用网页布局：列布局、行布局、圣杯布局、
1.经典的行布局：页面水平并垂直居中：设置容器元素div为absolute，top：50%；left:50%, margin-left: wifth/2 , marigin-top:height/2
注意：因为没有考虑自身的长度和高度，所以效果并不是垂直水平居中，我们只需要设置一下外边距，上外边距为高的一半，左外边距宽的一半即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ margin:0; padding:0; color:#fff; text-align:center; } .container{ width:90%; max-width:1000px; height:1000px; background:#4c77f2; margin:0 auto; } </style> </head> <body> <div class="container"> 页面布局-----行布局 </div> </body> </html>