这篇文章主要介绍“CSS的position属性有哪些类型”,在日常操作中,相信很多人在CSS的position属性有哪些类型问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS的position属性有哪些类型”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!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; wid免费云主机、域名th: 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属性有哪些类型”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!
这篇文章主要讲解了“怎么使用JS console.log函数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用JS console.log函数”吧!1. console.assert()只想输出选定日志时这…