CSS定位机制

将各个盒子进行定位

1、文档流flow定位

是一种默认方式，各个盒子从上到下，从左到右排列

元素分为三类，包括block、inline、inline-block类型

display：none——元素不被显示

block元素：

• 独占一行
• 元素的height、width、margin、padding都可设置
• 常见的block元素有<div>、<p>、<h1>......<h6>、<ol>、<ul>、<table>、<form>
• 将其他元素显示为block元素，如将链接a元素转化为block元素，从而使a元素具有块状元素特点，a{ display：block；}

inline元素：

• 不单独占用一行
• width、height不可设置
• width就是包含的文字或者图片的高度，不可改变
• 常见的inline元素有<span>、<a>
• 显示inline元素的方法——display：inline；
• inline元素之间有一个间距问题，可以inline类型转化为block类型等其他类型

inline-block类型:

• 同时具备inline元素、block元素的特点
• 不单独占用一行
• 元素的height、width、margin、padding都可设置
• 常见的inline-block元素——<img>
• 显示inline-block元素的方法——display：inline-block；

 

2、浮动float定位

让div实现横向多列排列，脱离文档流，使其动起来，采用float进行设定

float属性：

• left——左浮动
• right——右浮动
• none——不浮动
• 当设置浮动时，原有的位置会丢失，其他元素会占据这个位置
• 当三个盒子都向右浮动且宽度不够时，box3会下降在第二行与box1并列，或者被box1卡住（当box1的高度大于box2）

clear属性：

• both——清除左右两边的浮动
• left和right——只能清除一个方向的浮动
• none——默认值，只在需要移除已指定的清除值时才会用到
• 清除浮动并不是把浮动元素去掉而是清除方向上不会有浮动元素，如将两个盒子先设置右浮动然后用clear清除右浮动，这两个盒子会靠右垂直排列
• 侧栏向右浮动，并且短于主内容区域，页脚于是按浮动所要求的向上跳到了可能的空间，此时可以使用clear：both；使其另起一行

3、层layer定位

像图像软件中的图层一样可以对每个layer能够精确定位操作，用position属性（相对于谁定位）进行设定

通过top、right、bottom、left，z-index来设置相对于参照物的位置，z-index值大的在上面，值小在下面，逐层排列

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

position取值：

无论参照物是谁，坐标原点始终在参照物的左上角

• static——默认值，没有定位，元素出现在正常的流中，top、right、bottom、left，z-index无效
• fixed——固定定位，相对于浏览器窗口定位，不会随着浏览器窗口的滚动条而变化，总在视线里的元素，top、right、bottom、left，z-index有效
• relative——相对定位，相对于其直接父元素进行定位，定位为relative的元素会脱离正常文档流，但其在文档流中的原位置依然存在，top、right、bottom、left，z-index有效
• absolute——绝对定位，相对于static定位以外的第一个父元素，定位为absolute的元素会脱离正常文档流，但其在文档流中的原位置不再存在，其定位的层总是相对于其最近的定义为absolute或者relative的父层，而这个并不一定是其直接父层，top、right、bottom、left，z-index有效，对于absolute定位的层，如果父层中都为定义absolute或者relative，则其将相对定位对body进行定位
• relative+absolute通常叠加使用，父元素设置为relative属性，子元素设置为absolute属性，子元素的top、right、bottom、left，z-index会相对于父元素来进行偏移设置