css之position

html中的三种布局方式

• 标准流 （网页中默认的布局方式即顺序布局）
• 浮动
• 定位

HTML分为两大元素

• 块级元素：独占一行（div、 H1~H6、 table 表格 有序表无序表 、 p等 ）
• 内联元素：横水平排行（a img span input）

position的定位属性（定位position来改变标准流）

position属性的意义

• position定位属性决定了元素如何定位
• 通过top、left、right、bottom实现位置

position中的可选参数：static| relative | absolute | fixed

注：所有带定位属性的元素都会出现层级的区分，后写的带有定位属性的层级大于先写的带有定位属性的层级，也就是会覆盖先写的部分

1. static：元素的box模型其位置预设为静态(static) 即隐含宣告了position:static

此时若有宣告 top, right, bottom, left 等属性视为无效，因static的意思就是固定了位置。
此元素位于其它元素之后或之前，端视原始文件中的元素出现先后顺序，或说 此元素的位置位于正常的文件流程之中(normal flow of the document)，不因 top, right, bottom, left 等属性而改变其位置，故称之为static。

2. relative：元素的box模型其位置若为相对(relative)即确实宣告了position:relative

hTML代码

 <div class="div1"></div>
<div class="div2"></div>

css代码

 .div1{ width: 200px; height: 100px; background: red; position: 
        relative; left: 10px; top:10px; }
 .div2{ width: 200px;height: 100px;background: blue;}

效果图

关键点是它原本的空间仍然保留
相对定位，可通过top、right、bottom、left改变位置
始终以网页的左上角作为原点移动，设置top和left时以网页下端方向为Y正轴以网页的右端方向为X正轴，设置bottom和right时以网页的上端为Y正轴，以网页的左端为X正轴。
后写的元素层级大于先写的元素层级

3.absolute：元素的box模型其位置若为绝对(absolute)即确实宣告了position:absolute

绝对定位，通过设置left，right，top，bottom会使得元素脱离正常的文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，

4.fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。与background-attachment:fixed相似

固定定位，通过设置left，right，top，bottom会使得元素脱离正常的文档流
注：与绝对定位的区别,不论父元素是否有定位属性都不会受制于父元素，

5.inherit

继承，会继承父元素的定位属性，如果父元素没有定位属性，则作为子元素也不会具有定位属性

z-index

可以设置元素的叠加顺序，但依赖定位属性，有三种属性（auto,num（可以设定数值）,inherit（继承））

• z-index大的元素可以覆盖z-index小的元素
• z-index为auto的元素不参与层级比较
• z-index为负值，元素可被普通流中的元素覆盖
• z-index不存在时浏览器默认z-index为0

注： 层级具有继承性，若父元素层级大于相邻元素层级，即使子元素小于该相邻元素层级，它也能覆盖该相邻元素