css position

css position 'absolute' and 'relative' is the mostly confused property of element.

relative 好理解;absolute很容易被误解--以前一直以为是以document原点为坐标原点,其实这在大部分时候也是正确的;但是如果当前设置了absolute的元素的parentelement也设置了absolute或者relative属性时,该元素的坐标就会参照parentElement的坐标拉.

此外,2个设置了relative或absolute的元素内部进行absolute定位后,内容的层叠顺序和内容的parentElement保持一致.要解决这样的问题,可以在后面的那个parentElement上去掉position设置.

< div style =position:relative >< span style =background:red;position:absolute;top:10;left:10 > before </ span ></ div >
< div style = >< span style =background:blue > after </ span ></ div >