CSS的position属性有哪些类型

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

成都创新互联公司是一家专注于成都网站设计、网站建设与策划设计,北川羌族网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:北川羌族等地区。北川羌族做网站价格咨询:18982081108

position四种类型

(1)static

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

(2)relative

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

HTML代码

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代码

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属性有哪些类型”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


当前文章:CSS的position属性有哪些类型
标题来源:http://scyanting.com/article/jpooco.html