06.CSS定位装饰

属性索引：定位position，位移transform，z-index（调整定位的盒子层级关系），垂直对齐方式vertical-align，鼠标类型cursor，边框圆角border-radius，溢出显示效果overflow，可见性visibility（占位），显示模式display，元素整体透明度opacity，

一、定位

1.网页常见的布局方式

1. 标准流：块标签独占一行->垂直布局；行内元素/行内块元素一行显示多个->水平布局。
2. 浮动：可以让原本垂直布局的块级元素变成水平布局。
3. 定位：可以让元素自由的摆放在网页的任何位置；一般用于盒子之间的层叠情况。

2. 定位的常见应用场景:置顶栏等

3.定位的使用步骤

1.设置定位方式
属性名:position

属性值	定位方式
static	静态定位（无区别，不介绍）
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.设置偏移量
偏移值设置两个方向，水平和垂直各选一个使用即可
选取原则为就近原则（离哪边近就用哪个）

方向	属性名：数值+px	含义
水平	left	距离左边的距离
水平	right	距离右边的距离
垂直	top	距离顶部的距离
垂直	bottom	距离底部的距离
如果都有，以left,top为准

4.相对定位relative：相对于自己之前的位置进行移动

特点：占有原来的位置（没有脱标）；仍然是标签原有的显示模式：

position:relative;
left:100ox;
top:200px;

5. 绝对定位absolute：先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；如果父级没有定位，则以浏览器窗口为参照进行定位

模式：position：absolute
特点：脱标，不占位；改变标签的显示模式特点，具备行内块的特点（在一行共存，宽高生效，不写宽高则尺寸由内容撑开，宽高内容都没有则盒子尺寸为0，即不显示）

• 父级定位
  属于绝对定位，可用于嵌套块级，当父级有定位（有position属性）时，可以使用绝对定位absolute，以（有定位的）父级为参照物进行定位，**在工作中一般父级采用相对定位模式&#x