绝对定位position: absolute;
Posted Andy.Chen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了绝对定位position: absolute;相关的知识，希望对你有一定的参考价值。
<!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; width:200px; border: 4px solid red; background-color: #4cae4c; margin-top:100px; margin-left:100px; } #children{ position: absolute; height: 20px; width: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>
以上是关于绝对定位position: absolute;的主要内容，如果未能解决你的问题，请参考以下文章
IE6/IE7下position:absolute;绝对定位偏移不显示问题
CSS position绝对定位absolute relative