CSS进阶07
定位
基本介绍
标准流
1.块级元素独占一行-->垂直布局
2.行内元素/行内块元素 一行显示多个-->水平布局
浮动
可以让垂直布局的块级元素变成水平布局
定位
1. 可以让元素自由摆放在网页的任意位置
2. 一般用于盒子的层叠情况
使用定位的步骤
1.定位方式
属性名:position
定位方式 | 属性值 |
---|---|
静态定位 | static |
相对定位 | relative |
绝对定位 | absolute |
固定定位 | fixed |
2.设置偏移值
- 偏移值分为2个方向 水平和垂直各选一个即可
- 一般是就近原则(离哪边近选哪个)
相对定位
代码:position:relative;
特点
1.占有原来位置
2.相对定位的盒子仍然具备原有标签的显示特点
3.改变位置上参照自己原来的位置
tips:如果left和right都有 以left为准;top和bottom都有 以top为准
绝对定位
代码:position:absolute
定位方法:
先找已经定位的父级 如果有就以父级为参照物进行定位
有父级 但父级没有定位 以浏览器窗口为参照定位
子绝父相:子级绝对定位 父级相对定位
注意:
绝对定位查找父级的方式:最近找定位的父级 如果逐层找找不到父级 则以浏览器窗口为参照定位
固定定位
position-fixed固定定位
特点:
1.脱标 不占位置
2.改变位置参考浏览器窗口
元素的层级关系
- 相对、绝对、固定默认层级相同
- HTML中写在下面元素层级更高 覆盖上面元素
如果想让上面的在上面
z-index:整数;(取值越大 显示顺序越上)z-index默认值为0 必须配合定位才生效