CSS进阶-定位装饰

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 必须配合定位才生效