在网页的界面中进行层叠样式表格式化输出标签的位置的时候,会用到position这个标签。在使用此标签的时候总会被absolute和relative这两个布局搞晕,普遍的使用的时候通过其中文的翻译可以大体得知:
absolute:绝对
relative:相对
但是对于灵活使用absolute和relative的布局的时候,总要搞混。根据实际经验,我对这两个属性的理解是:
absolute:如果父级元素没有设置position属性,那么当前定位的坐标是浏览器左上角为坐标原点进行的定位。
如果父级元素有设置属性,那么定位的坐标是当前父级元素左上角为坐标原点进行相对应的定位。
relative:则参照父级(最近)的内容区的左上角为原始点结合属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以 BODY的左上角为原始点。相对定位是不能层叠的