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

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元素能够一直浮动再页面的固定位置上。