relative 和 absolute 的区别

Css+div 中的position 有四个属性:static,relative, absolute,fixed

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

2.relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3.absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。

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

 

定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。

relative与absolute的主要区别: relative定位的层总是相对于最近的父元素,无论其父元素是何种定位方式absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,


fixed:

posted on 2019-05-20 17:31  JosephP  阅读(1168)  评论(0)    收藏  举报

导航