学透css定位,css定位 position

1、position:relative; 相对定位 原先的位置不会被后面的元素占用

(1)若设置了top和left的值，则它以它的父元素的(若没有父元素就以它自己的)左上角为原点，向右向下为x轴、y轴的正方向，移动相应的距离

(2)若设置了top和right的值，则它以它的父元素的(若没有父元素就以它自己的)右上角为原点，向左向下为x轴、y轴的正方向，移动相应的距离

(3)若设置成负值，则原点不变，正方向变为相反的方向

以此类推……

2、position:absolute; 绝对定位 原先的位置会被释放，然后被后面的元素占用

(1)若设置了top和left的值，则它以它的最近的定位了的父元素的(否则以当前可视浏览器窗口的)左上角为原点，向右向下为x轴、y轴的正方向，移动相应的距离

(2)若设置了top和right的值，则它以它的最近的定位了的父元素的(否则以当前可视浏览器窗口的)右上角为原点，向左向下为x轴、y轴的正方向，移动相应的距离

(3)若设置成负值，则原点不变，正方向变为相反的方向

以此类推……

(4)若以浏览器窗口的右下角为原点，且bottom设置为负值时，则它会向浏览器下方移动，这时可能会移动到浏览器的下一屏