css的position属性值有哪些?有何区别?


css的position属性值有哪些?有static、inherit、relative、absolute、fixed,都是用来规定元素的定位类型,还有一个z-index属性,虽然不是position属性的值,但是经常会搭配position属性使用,用来控制定位元素的堆叠顺序。

position属性的值有何区别

position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

光看定义,很多新手同学可能已经看晕了,别急,如乐老师下面展开来讲:

static:

static是默认值,也就是没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。详情点击:《css的position:static是什么意思?有什么作用?》。

inherit:

inherit是规定应该从父元素继承 position 属性的值。这个也很容易理解,比如A元素里面包含一个B元素,如果B元素写上了position:inherit;,则会继承A元素的position 属性的值。有关父元素的详细内容请点击:《html中的父元素、子元素、兄弟元素是什么?》。

relative

position:relative是相对定位的意思,如果某元素添加了position:relative属性,会把该元素设置为相对定位,该元素会变成一个有框的空间,那么,设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。详情点击:《css的定位属性position:relative是什么意思?怎么用?》。

absolute

position:absolute指的是绝对定位的意思,设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。详情点击:《css的定位属性position:absolute是什么意思?怎么用?》。

fixed

position:fixed指的是固定定位的意思,如果某元素添加了position:fixed属性,会把该元素设置为固定定位,该元素会变成一个有框的空间,简单理解就是,添加了position:fixed属性的元素,会浮起来,相对于浏览器窗口进行定位。详情点击:《css的定位属性position:fixed是什么意思?怎么用?》。

z-index属性

z-index属性设置元素的堆叠顺序,当你想要控制某个元素的堆叠顺序时,需要用到z-index属性,简单理解就是:我们知道平面的轴是x和y,x控制水平的方向,y控制垂直的方向,那么z轴,就是立体的那条轴,控制上下的方向。详情点击:《z-index属性的作用是什么?怎么用?》。

学会了控制元素的位置,接下来,就要学习控制元素的大小了,也就是宽度和高度,详情点击:《css设置宽高用什么属性?用width和height属性》。

转载时请注明来源!首发:如乐建站之家
原文链接:
http://www.rulejianzhan.com/css/8114.html

作者如乐老师  如乐老师的QQ:349142701

  如乐老师的微信:349142701

  如乐老师的电话:13189611692

如果你有时间和精力自学,没必要找我帮你建网站,因为我写了快速建站教程,点击下图学习:



鼓励 知识小手