css的position定位属性

position的值:relative,fixed和absolute分别是相对谁进行定位的

position:定位属性;

定位都脱离层。

语法:position:static /absolute/relative/fixed

absoluted/relative/fixed 对定位有效,层级属性用z-index属性,其值越高,层级越高,优先显示。

取值:

  1. static:默认值,无特殊定位,对象遵循HTML原则;
  2. absolute:绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素(祖先元素|祖先元素不包含叔叔级的)进行绝对定位;如果不存在这样的父对象,则依据根元素(html)浏览器进行定位,而其层叠通过z-index属性定义,可以脱离当前的大容器,并且不占位。float脱离半层。
  3. relative :相对定位,该对象的文档流位置不动,将依据right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置;其层叠通过z-index属性定义

一般给父层级添加relative属性值(父相子绝)

相对于自身位置进行偏移

元素设置:margin:0 auto时:

(1)box为相对定位时(相对自身),居中

(2)box为绝对定位时(相对于根元素HTML),向左

  1. fixed:固定定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性,并且永远相对于当前浏览器的可视窗口进行位置偏移。




本人小白,各位想踏入前端的,我们可以一起学习,欢迎程序员大佬的指点
原文地址:https://www.cnblogs.com/xiao-lei-ge/p/12739387.html