布局中position有static (静态) absolute(绝对) relative(相对)
这里只谈谈我自己对绝对布局和相对布局的情况吧
首先,先来理解一下文档流的概念,在浏览器对html文档进行解释时,html里的文档结构会被浏览器从上到下进行解释。通俗的来讲,我自己的个人理解是:文档流就是已经根据html结构进行排好的要进行解释的一个标签的一个顺序,然后浏览器就根据这个文档流顺序进行对逐一解释出来,展示给人看的。
好了。先讲绝对布局,如果给定一个元素是绝对布局的话,该元素将在文档流里面不再存在的,这个时候,我们就当这个绝对布局的元素不存在,就当它没有似的,然后浏览器根据文档刘里面其他的元素进行解释出来,整个页面都出来了,最后一步,就是把这个绝对布局的标签,根据它的有定位(绝对定位和相对定位都是)的父元素的左上角(如果一直都找不到,直接找到body)进行定位,然后就是根据left,right,top,bottom进行距离的定位
(因为绝对布局把自己从文档流里面的位置让出来,等其他元素排好了才轮到自己进行定位,所以我们就叫他是贡献的把)
相对布局:这个时候呢,如果给定了一个元素是相对布局的话,在浏览器对文档流进行逐一解释的时候,解释到该相对布局的元素的时候,该元素并没有像绝对布局那样把自己的位置让出来,而是保持解释时的所占的空间,腾空出来,但先不进行对该元素的内容进行解释翻译,然后继续解释往下的文档流操作,当整个页面都进行解释完的时候,该相对布局的元素就根据原先没有进行相对布局移动时所在的位置空间的左上角的坐标,进行left right top bottom进行相对距离的移动
(由于相对布局的并没有把自己的位置腾空出来,而是相对原来的位置进行了上下左右的移动调整,所以我们就说它是自私的)
无论是决定布局还是相对布局都好,他们都会有可能可其他元素进行重叠的,这个时候用z-index 进行层之间的调整
z-index是一个属性名称,它的值是一个整数型,可以是负数,数字越大,排在的层就越靠上面
最后重温下position的四大值得应用理解:
基于文档流,可以理解布局模式:
相对定位:即相关于元素在文档流中地位进行偏移,但保存原占位。
绝对定位:即完全离开文档刘,根据有定位的父级元素位置来定位偏移
固定定位:即完全离开文档流,相对于可视区进行偏移
文档流是文档中的可显示对象在排列时所占用的位置。
绝对定位:将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。当对象定位在浏览器窗口外,浏览器因此显示滚动条。
固定定位:对象定位遵从绝对定位,但是要遵守一些规范,当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。
相对定位:当对象定位在浏览器窗口外的时候显示滚动条
inherit:继承值,对象将继承其父对象相应的值。