CSS技术的position属性

2024-01-18 14:55 小编

postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。

position四种类型

1static

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

2relative

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

HTML代码

<div>

</div>

<div></div>

CSS代码

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

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

3absolute

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

HTML代码

<span>

</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标签被设置成绝对定位,就可以设置heightwidth属性,而且不占有原本的空间,后面的div元素会顶替上去。

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

包含块

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

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

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


Tag: 技术
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码