css中的position、z-index、clearfix

<span style="font-family: 'Times New Roman'; background-color: rgb(255, 255, 255);"></span>

在css中调样式是再常见不过了，不过今天要说的position、z-index、clearfix和clear是非常需要注意的。

position

平时直接使用html元素的时候，可以不显式的使用它，但是事实上浏览器会给它设置默认值position:static。position的取值共有4种：static、relative、absolute、fixed。

• static
  就是遵循基本文档流，即从左到右，从上至下。块级元素默认占一行（可以使用inline-block或者display：table-cell使其变成行级元素），当一个元素在某行放不下时，会自动移至下一行。
  

• relative
  

  也遵循基本文档流，但是它可以设置top、left、right、bottom四个属性来设置元素的位置，并且这四个属性是相对于当前元素自身在文档流中的位置来说的。例如:position:relative;top:-5px;left:30px.这样其实是将元素相对于自身上移了5px，右移了30px。
  

• absolute
  

  脱离基本文档流，它也有top、left、right、bottom四个属性，但是是相对于最近一个position属性值不是static的元素来说的。因为脱离了基本文档流因此它不会占用文档流空间。
  

• fixed
  

  脱离了基本文档流，它也有top、left、right、bottom四个属性，但是这四个属性是相对于屏幕来说的，因此，一般在需要使一个元素始终保持在屏幕的某个位置即使拖动滚动条也不变的话就需要使用它。例如，在右键菜单的场景中，我们是需要使用它的。
  

z-index

z-index顾名思义，其实就是我们数学上说的z轴的位置，它代表的就是当前的元素面板在垂直于屏幕的z轴上的值，如果该值越大，则该层优先级越靠前，这样就会覆盖优先级比它低的其他元素面板。
    ​z-index的意思很好懂，但是需要注意一点，使用它的时候必须要同时使用position属性才行，不然，无论怎么设置z-index都没有用。

clearfix

clearfix是一个class，但是这个类是需要自己定义的，但是在bootstrap中已经提供了这个类，它的css代码如下：

clearfix:before{    ​content:"";    ​display:table;}clearfix:after{    ​clear:both;}

主要是clear:both这句的作用，它其实就是清除浮动。需要注意的是该类需要在浮动元素的父节点上使用才能发挥作用，原因也是很明显，如果直接在浮动节点上使用，它只是通过伪类clearfix:after在浮动节点内部的末尾增加了一个空块级元素，并且该块级元素拥有clear：both属性，使其清除了自身的对浮动的可见性（个人理解，如果一个元素设置了float，不占用文档流空间，因此后一个非浮动元素会占用该位置，并且其中的文字会在float元素周边出现，clear：left或者clear:right或者clear:both其实只是屏蔽了当前元素对左右两边浮动元素的可见性，会把他们当做非浮动元素来对待，然后判断自己的文档流位置）

总结

html虽然简单但是要对每个问题弄清楚还是需要时间和下功夫。