css的position 如何使用？

Question

如题，CSS里面的position具体的用法请讲解一下，谢谢

Answer 1

具体的话有两类，一是 绝对定位，二是相对定位。

绝对定位：position: absolute;语法：<div style="position: absolute;left:100px;top:100px"></div>

有如下两种情况

1，没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点 

2，有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下： 

(1)，父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定 

(2)，父级有 position 属性，父级的“坐标原始点”为原始点 

相对定位：position: relative; 

参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，并且会在父块以外占据相同的大小，所以不推荐使用。

PS：left和right两个之中只能设置一个  top和bottom也是一样的，只能设置一个。