Fork me on GitHub

三种定位机制:关于这个,有一种说法是这样的,普通流(有地方也叫文档流),相对定位,和绝对定位。w3c上是这样的:普通流,浮动,和绝对定位。这里我还不能很明确的说哪一种更好。

  • 普通流是按照html的顺序来定位的。当position为static时,也会按照普通流来定位。
  • 相对定位,是position为relative是产生作用的,就是在框原来普通流位置上进行表象的移动,实际上在页面上占据的位置不变。不会影响其他元素的位置。
  • 绝对定位,position为absolute,元素已经脱离普通流定位了,会相对于其父元素进行定位,且父元素的position不能是static。没有的则是相对于body。可以覆盖其他元素。所以需要使用z-index来控制叠放顺序,z-index越高,元素位置就越在上。要使用z-index则必须给元素的position设值且不能是static。关于z-index更多请看这篇文章

position几个值:

  • static,静止。元素按照普通流布局,不能使用z-index等,设值top,left等均无效。
  • relative,相对定位,相对元素本身的位置定位。不会影响其他元素定位。
  • absolute,绝对定位,脱离普通流定位,相对于其父元素定位。覆盖其他元素。
  • inherit,继承父元素。
  • sticky,CSS3中新的属性,在元素没有超过屏幕高度是类似,relative,超过后类似fixed,固定住了,但绝大多数浏览器不支持。刚查了只有Firefox可以。。少用
  • fixed,固定定位。设值固定位置。一直不变。

浮动:这两天的认识,浮动呢,其实是元素自己本身的浮动。将元素设为浮动后,会表现的在文档中不存在一样。后面没设的会跑上来。浮动可以左右移动,知道碰到父元素的边框和其他浮动元素边框

浮动元素不会影响块级框的布局,而只会影响内联框(文本)。
当浮动框高度超出包含框时,包含框不会自己增加高度,所以就会显示在外面。也叫(高度塌陷),因此需要闭合浮动。使其表现的像正常的一样
当包含框中的所有元素浮动后,包含框就会像没有元素一样, 高度会为零(塌陷)
<div id="wrap">
    <div class="first"></div>
    <div class="second"></div>
</div>

.first, .second {
  float:left;
  background:red;
  width:100px;
  height:50px;
  margin:10px;
}
#wrap {
  border:10px solid black;
}

所以就需要清理浮动。

 posted on 2015-10-01 10:10  六人行与  阅读(150)  评论(0编辑  收藏  举报