position记录

最新推荐文章于 2023-03-03 09:51:47 发布

lceBear

最新推荐文章于 2023-03-03 09:51:47 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jack-liu6/p/9667382.html

本文详细解析了CSS中的两种重要定位方式：相对定位(relative)与绝对定位(absolute)。相对定位元素仍占据原有空间，并依据top、right、bottom、left属性相对于自身原始位置进行偏移；绝对定位则使元素脱离标准文档流，依据这些属性相对于最近的已定位祖先元素进行定位。

1. relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

2. absolute(绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。但与relative的区别是其在正常流中的位置不再存在。absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位

定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：
　第一：设定TRBL
　第二：父级设定Position属性
　

转载于:https://www.cnblogs.com/jack-liu6/p/9667382.html