定位
定位的基本介绍
定位的基本使用
解决盒子与盒子之间的层叠问题
可以让盒子始终固定在屏幕中的某个位置
静态定位
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/aafdc7f873cbf17cccb5355a92d85631.png)
相对定位
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b4f1ebac1099c214355b1272e8dc50f.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/54a813578dde53b8423253617e060d74.png)
只写left 和top ,right和bottom不生效没有用
绝对定位
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6411f350cb7703d177b5b1d92b67fd40.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f7be268854359ca577f2ad5c9fb194f8.png)
子绝父相
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4021c8d6b5c88a833e504302d7807d12.png)
位移居中
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2cabcb8e4eb62840c7d50159ba4f2c29.png)
案例1
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c279adff4b47dac874c3718c0243e094.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e99a902bae86429695c0c946b1aa9c98.png)
案例2
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a8df4ee5111aa760d78c4c24b25ebe26.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7e585756c6916576e75bc4a5f6026d3c.png)
固定定位
1.脱标-不占位置
2.改变位置参考浏览器窗口
3.具备行内块特点
元素的层级关系
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/afcfea6e67a238ac9d1f5af056297b50.png)
配合定位使用才生效
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cb1f55d97f69ca7ef10f298b34abcca7.png)
装饰
基线baseline
垂直对齐
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/100551658bbe63b599b4344ee3d3a6a0.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6639260c08e0901a5d8a34f9011ef194.png)
要给父级加个行高,然后才能垂直居中,如果居中要给父级加text-align:center
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4e514b06edbca2619b6ae40a703681d5.png)
光标类型
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ce7a7bad83e3c102ca222057a8d25003.png)
边框圆角
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/be12a130b1901e4d50b93d8a01f46f1e.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c8668bf9846256b191b6069cd28dafc3.png)
工作中常用的边框圆角
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0e1d4b64a1b9c081117cd81790d04658.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dea490c2acb416642403048f24c00424.png)
overflow溢出部分显示效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6c8ecf687900acafb64706a71c2543a4.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/aa96a31563d85a0bd144c4f5e420d1bf.png)
元素本身隐藏
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eb5fc809a5186b8e3a4e02a3f57c2d5d.png)
显示元素
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f2500a335b956b3ab73c068a02eb400b.png)
拓展:元素整体透明度
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1ea045db77b251fd3d17778651d90fa8.png)