Web笔记（基础6）

 六.CSS定位

1.定位组成
定位=定位模式(定位方式)+边偏移(最终位置)
边偏移top/bottom/left/right：--px;

2.定位模式 position
static静态定位，relative相对定位，absolute绝对定位，fixed固定定位
(1)static        默认定位方式，无定位，按照标准流特性摆放位置 无边偏移
选择器{position:static;}

(2)relative        移动位置是相对于原来位置作为参照点  
选择器{position:relative;}
不脱标，继续保留原来的位置

(3)absolute        移动位置是相对于他的父元素作为参照点
选择器{positive:absplute;}
若无父元素或父元素无定位，则以浏览器为准定位
如父级元素有定位，则以最近一级的有定位父级元素为参考点移动
绝对定位不再占有原来的位置，脱标
.1.子绝父相
父级需要占用位置，所以是相对定位
子盒子不需要占用位置，所以是绝对定位
.2.绝对定位盒子页面的水平居中
第一步：盒子left：50%，走到浏览器可视区一半位置
第二部：盒子margin-left：负的盒子宽度的一半
.3.绝对定位盒子页面的垂直居中
第一步：盒子top：50%，走到浏览器可视区一半位置
第二部：盒子margin-top：负的盒子宽度的一半

(4)fixed        移动位置是相对于浏览器可视区为参照移动
选择器{position:fixed;}
固定于浏览器可视区，跟父级元素无关系，不随滚动条的滚动而滚动
不占有原来的位置，脱标
.1.固定到版心右侧
第一步：盒子left：50%，走到浏览器可视区一半位置
第二步：盒子margin-left：版心宽度的一半距离，多走版心一半位置
.2.粘性定位 sticky        移动位置是相对于浏览器可视区为参照移动（固定定位特点）
选择器{position:sticky;}
必须添加top left right bottom其中一个才有效
占有原来的位置 不脱标（相对定位）

3.定位的叠放顺序
选择器{z-index:-数字-;}    不能加单位
若属性相同，则按照书写顺序，后来者居上
数值可正负，默认auto，数值越大盒子越靠上
只有定位的盒子才有z-index属性

4.定位特殊属性
加定位后 行内元素可以直接设置宽高
块级元素如果不给宽高则默认是内容大小
脱标的盒子不会触发外边距塌陷

5.定位拓展
浮动的元素会压住下面标准流的盒子，但不会压住文字
绝对/固定定位会完全压住盒子，会压住下面标准流所有的内容

6.元素的显示与隐藏
(1)display显示隐藏            隐藏后不再占有原来位置
display:none; 隐藏对象    
display:block; 显示元素，转换为块级元素

(2)visibility显示隐藏        隐藏后占有原来位置
visibility:visible; 元素可视
visibility:hissen; 元素隐藏

(3)overflow溢出部分隐藏
overflow:visible;    显示
overflow:hidden; 溢出部分隐藏 （有定位的盒子慎用，会隐藏多余部分）
overflow:scroll; 溢出部分显示滚动条 不溢出也显示滚动条
overflow:auto; 溢出部分显示滚动条 不溢出不显示滚动条