CSS浅析位置:相对/绝对定位方式 - 行业资讯 - 肥雀云

一、位置:相对相对定位

分两种情况分析:
·无位置:相对;
·有位置:相对的。

代码如下图:

显示效果如下图:

<>之前,我们给,box4加入,位置:,相对属性。　　,*如果元素加上,位置:,relative 属性;,元素默认为,块级元素。　　,*如果未给出TRBL(,,,,,,左),,元素位置不变,,样式不变。　　,*给出,TRBL时,是相对于,之前的位置(元素初始位置或称为元素未添加,位置:,相对时的位置)进行移动。　　,*,并且,box4被解放出来了,,不会被父元素包裹。

二,位置:绝对绝对定位# #

分三种情况分析:
·无位置:绝对的,
·有位置:绝对的,
·有位置:绝对的,并给父级元素加位置:相对的。

代码如下图:

浏览器显示如下图:

<>之前,第二种情况: 　　,*给,box4加入,位置:,绝对属性。　　,*如果元素加上,位置:,assolute 属性;,元素默认,显示:inline-block。　　,*如果未给出TRBL(,,,,,,左),,元素位置不变,仅仅是变为,行内元素。　　,*给出,TRBL时,是相对于,身体进行移动。　　,第三种情况: 　　,*给,box4加入,位置:,相对属性。　　,*如果元素加上,位置:,relative 属性;,元素默认为,块级元素。　　,*如果未给出TRBL(,,,,,,左),,元素位置不变,,样式不变。　　,*给出,TRBL时,是相对于,之前的位置(元素初始位置或称为元素未添加,位置:,相对时的位置)进行移动。　　,*,并且,box4被解放出来了,,不会被父元素包裹。