#全面解析# js中 Position 关键字的 static、fixed、absolute、relative 四个属性值

1 static(静态定位)

static:默认值。没有定位,元素出现在正常的流中忽略 top, bottom, left, right 或者 z-index 声明。

2 relative(相对定位)

relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。使用相对定位Relative进行定位时,原本该元素占据的空间位置不变,以 “原本该元素”的左上位置为中心点,根据设置的left和top进行位置的偏移。总结一下就是,无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的Padding属性会对其影响。

3 absolute(绝对定位)

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。但与relative的区别是其在正常流中的位置不再存在
若想把一个定位属性为absolute的元素定位于其父级元素内,必须满足以下两个条件:
  1. 设定TRBL
  2. 父级设定Position属性

4 fixed(固定定位):

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

发布了59 篇原创文章 · 获赞 2 · 访问量 4643

猜你喜欢

转载自blog.csdn.net/lch551218/article/details/104791177
今日推荐