CSS定位

四种定位方式:(由元素设置position属性确定定位方式)

1.static(静态定位)----默认值,标准文档流正常位置(html中的位置),处于标准文档流中

2.relative(相对定位)----相对自身原有(正常)位置偏移,处于标准文档流中

3.absolute(绝对定位)----相对非默认定位的首个父元素(包含块)偏移,脱离标准文档流

4.fixed(固定定位)----相对浏览器窗口偏移来定位

·相对定位(position:relative)

定位特点:

--相对于自身原有位置(标准文档流正常位置)进行偏移

--仍处于标准文档流中(自身原有位置所占空间保留

--随即拥有偏移量letf/right/top属性&空间堆叠z-index属性


CSS定位_第1张图片
CSS定位_第2张图片
CSS定位_第3张图片

·绝对定位(position:absolute)

定为特点:

--建立已包含块为基准的定位(相对于static定位以外(非静态定位)的第一个父元素

  没有这样的父元素就是相对偏移

--完全脱离标准文档流,对于html中的其他兄弟元素不造成任何影响

--随即拥有偏移量left/right/top属性&空间堆叠z-index属性


CSS定位_第4张图片
CSS定位_第5张图片

你可能感兴趣的:(CSS定位)