HTML 学习 四种布局方式absolute和fixed

为什么80%的码农都做不了架构师？>>>   

absolute 和 fixed 的定位方式和static，relative 不同。absolute是根据父元素中第一个非static布局的元素作为定位依据的。
fixed则是相对于当前浏览器窗口的大小而定的。

默认的位置和static是一样的。没有任何位移。为div1 设置margin和padding看，效果也没有什么不同。

absolute的魔力不在于此。absolute的特点是他是脱离文档流的。也就是说，他不在文档中占用位置，但是他依靠文档的父元素来确定自己的位置。

div3是设置的对照，可以看到div2并没有对div3产生影响，也就是div3并没有按照从上到下从左到右那样排在div2的下面。div3完全无视了div2的存在。这就是脱离文档。

这里为div2 设置了top 和left 都是0，看到div2对齐了页面的左上角。div2的父元素是div1，div1的父元素是document文档，也就是我们看到的页面区域。由于div1的position为默认的，所以，不能当做div2的参照，因此div2只能再看看div1的父元素是否非static的。div1的父元素是document也就是body，也是static的，但是再往上也没有元素了，所以只能以body作为参照。向右移动0px，向下移动0px；

现在把div1改成relative 再看。

div1 可以作为参照了，那么div2的定位变成div1的左上角，向右移动0px，向下移动0px；

另外，对于absolute的元素来说，其left right bottom top 都是有效的。left表示，其相对于非static祖先元素，左边框距离，right表示，两者右边框距离。top，bottom同此。当然啦，这个时候是不好设置width和height属性的。

 

absolute的特点就是这样。

fixed 和 absolute 很相像，只是fixed的参照是浏览器可视区域的。当页面发生滚动的时候，由于浏览器的可视区域不变，因此fixed元素可以一直浮动再页面的固定位置上。

 

 

转载于:https://my.oschina.net/honchy/blog/355673