CSS的position属性有哪些类型

这篇文章主要介绍“CSS的position属性有哪些类型”，在日常操作中，相信很多人在CSS的position属性有哪些类型问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS的position属性有哪些类型”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

position四种类型

（1）static

static是position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示

（2）relative

relative翻译成中文称相对定位，设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留。我们看下面例子：

HTML代码

<div class="relative">

</div>

<div></div>

CSS代码

div { background: #0094ff; width: 250px; height: 100px; }

.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

（3）absolute

元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子：

HTML代码

<span class="absolute">

</span>

<div></div>

div { background: #0094ff; width: 250px; height: 100px; }

.absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

absolute效果

如图所示，span标签被设置成绝对定位，就可以设置height和width属性，而且不占有原本的空间，后面的div元素会顶替上去。

（4）fixedfixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移

包含块

在详解CSS float属性中我们提到包含块这个概念。对于position属性也有包含块这个属性，它要分几种情况来讨论：

1.根元素的包含块，根元素一般是html元素，有些浏览器会使用body作为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形

2.非根元素的包含块，如果该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界。

到此，关于“CSS的position属性有哪些类型”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！