在网页布局中,若一个元素参照另一个元素间进行绝对定位,则绝对定位的子元素以“坐标原始点”参照父元素的“内容区域原始点”为坐标起始点进行定位。在定位时一个元素的“坐标原始点”和“内容区域原始点”如下图所示:
遵循这种定位原则:
1、父元素设置为相对定位或是绝对定位,子元素为绝对定位。
2、绝对定位的子元素以“坐标原始点”参照父元素的“内容区域原始点”为坐标起始点。
在上图中我们看到,这个图中父级为黑灰色区块,子级为青色区块。父级是相对定位,子级是绝对定位。子级设置了顶部位移50个像素,左倾位移50个像素。那么我们看,子级的坐标原点并不是从父级的坐标原点位移50个像素,而是从父级块的padding左上边缘点为坐标起始点(即A点)。而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。
关于更多元素绝对定位坐标说明请参阅《布局模型(4)层模型的特征》一文。
附:
解释这个层叠关系还是很难表述,做了两次图例,一并附在这里:
第一次3D效果图 第一次3D效果图局部