<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* position: absolute; 相配合使用的属性分别有: 定位属性:left、right、top、bottom 堆叠顺序属性:z-index 定位属性是用来定位元素的位置的,四个方向可以设置位置; 堆叠顺序属性用来定义如果多个含有position属性的元素的堆叠顺序。 参照浏览器左上角,配合 top left right bottom(TLRB)进行定位, 1、在没有设定TLRB,默认依据父级的坐标原点为起始点 2、如果设定了TLRB,并且父级没有设定position属性, 那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定 3、如果设定了TLRB,并且父级设定position属性, 那么当前的absolute则以父级元素的左上角为原始点进行定位,位置将由TRBL决定 如果子元素没有设置TLRB,默认以及父级的坐标原点为起始点。 如果设定了TRLB,父级元素有定义position属性,则absolute的(0,0)位置在父级元素的左上角位置,位置由定位属性(TLRB)决定; 如果设定了TRLB,父级元素没有定义position属性,则absolute的(0,0)位置在浏览器的右上角位置,位置由定位属性(TLRB)决定。 所以谁absolute有随机性的,大多是因为没有注意到父级元素是否也定义过position属性 fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。*/ #parent{ position: absolute; height: 200px; 200px; border: 4px solid red; background-color: #4cae4c; margin-top:100px; margin-left:100px; } #children{ position: absolute; height: 20px; 60px; border: 4px solid blue; background-color: #761c19; top:10px; left: 50px; } </style> </head> <body style="margin: 0;padding: 0;background-color: gray"> <div id = 'parent'> <div id="children"> </div> </div> </body> </html>