如题。
网页布局中有一种情况是这样子。
两个元素,A,B均为块级元素,但是我需要A作为底,而B显示在A上面,并且相对于A确定在某个位置。
考虑使用position.position有三种,分别是fixed,relative,absolute。
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以 body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
一般上面描述的这种情况,我们会使用这样的方式来实现:
A需要有一个父级元素C。
我们将给C元素设置一个position:relative的属性。然后A元素照常在那个位置,不需要设置任何position的相关属性。对于B元素,我们设置其属性为position:absolute。由上面的介绍可以知道,position:absolute的父级元素有posititon的属性,那么该元素则以C元素的坐标原始点作为原始点进行调整。此时我们就可以通过TRBL四个属性来相对父级C的位置进行调整。
那么,如何让到B元素在A元素上面呢?就可以通过TRBL来让B转到A的上面。并可以任意调整他在A上面的位置。这个上下位置的属性,可以通过Z-index来进行调整,数值越大则位置越上。
那么如何使position:absolute来使得元素相对于父级元素进行定位呢?我们可以对B元素进行一个left:50%的向右移动,然后再设置一个margin-left:-(B元素宽度/2)px;来使得该元素向左移动其元素的1/2宽度。如此一来,B元素就能够相对其父级C元素进行居中。
基本上这就是我们灵活使用position属性的方法。但是这种方法有他的缺陷,就是只能够相对于某一个宽度高度已经设定的父级元素来居中定位。如果是相对于可视窗口来居中,这种方法则不可行。