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