再来一篇定位

定位
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两个部分
1、边偏移
2、定位模式
在CSS中 position 属性用于定义元素的定位模式 其基本语法格式如下 : 
选择器 { position: 属性值; }
position属性的常用值

静态定位(static)
在静态定位状态下 无法通过边偏移属性(top、bottom、left或right)来改变元素的位置
ps: 静态定位 对于边偏移是无效的 一般他用来清除定位 一个原来有定位的盒子 不想加定位了 就用 position:static 

相对定位relative
注意 : 
1. 相对定位最重要的一点是 他可以通过边偏移移动位置 但是原来的所占的位置 继续占有
2. 其次 每次移动的位置 是以自己的左上角为基点移动(相对于自己来移动位置)
就是说 相对定位的盒子 仍在标准流中 他后面的盒子仍以标准流方式对待他 (相对定位不脱标)

绝对定位absolute
当position属性的取值为absolute时 可以将元素的定位模式设置为绝对定位
注意: 他可以通过边偏移移动位置 绝对定位是完全脱标的 不占有位置

父级没有定位
若所有父元素都没有定位 那么以浏览器为准对齐(document文档)
父级有定位
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行对位

子绝父相
1. 子级是绝对定位 不会占有位置 可以放到父盒子里面的任何一个地方
2. 父盒子布局时 需要占有位置 因此父亲只能是相对定位

绝对定位的盒子水平/垂直居中
普通的盒子时左右margin改为auto就可以了 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中 有一个算法
1. 首先 left 50% 父盒子的一半
2. 然后走自己外边距负的一半值就可以了 margin-left: 左走自己宽度的一半;

固定定位fixed
固定定位是绝对定位的一种特殊形式  他以浏览器窗口作为参照物来定义网页元素 当position属性的取值为fixed时 即可将元素的定位模式设置为固定定位

当对于元素设置固定定位后 他将脱离标准文档流的控制 始终依据浏览器窗口来定义自己的是显示位置 不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化 该元素都会始终显示在浏览器窗口的固定位置
固定定位有两点: 

1. 固定定位的元素跟父亲没有任何关系  只认浏览器
2. 国定固定位完全脱标 不占位置 不随着滚动条滚动

叠放层次(z-index)
当对多个元素同时设置定位时, 定位元素之间有可能会发生重叠
在CSS中 要想调整重叠定位元素的堆叠顺序 可以对定位元素应用z-index层叠等级属性 其取值可以为整数 负整数和 0      比如  :   z-index: 2;
注意:
1. z-index的默认属性值是0 取值最大 定位元素的层叠元素中越居上
2. 如果取值相同 则根据书写顺序 后来居上
3. 后面数字一定不能加单位
4. 只有相对定位 绝对定位 固定定位有此属性 其余标准流 浮动 静态定位都无此属性 亦不可指定此属性

定位模式转换
跟浮动一样 元素添加了绝对定位和固定定位之后 元素模式也会发生转换 都转换为行内块模式 因此 比如 行内元素如果添加了绝对定位或者固定定位后 可以不用转换模式 直接给高度和宽度就可以了

元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见 我们要区分开 他们分别是 display visibility和overflow

他们的主要目的是让一个元素在页面中消失 但是不在文档源码中删除 最常见的是网站广告 当我们点击类似关闭不见了 但是我们重新刷页面  他们又会出现

dispaly 显示
diaplay设置或检索对象是否及如何显示

display:none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外 同时还有显示元素的意思
特点: 隐藏之后 不再保留位置

visibility 可见性
设置或检索是否显示对象

visible: 对象可视
hidden: 对象隐藏
特点 : 隐藏之后 保留位置

overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
visible : 不剪切内容也不添加滚动条
auto : 超出自动显示滚动条 不超出不显示滚动条
hidden : 不显示超过尺寸的内容 超出部分隐藏掉
scroll : 不管超出内容否 总是显示滚动条