css基础-四大定位(static、relative、absolute、fixed)

一、静态static定位:文档里正常盒子的定位。

静态定位的元素不会受到 top, bottom, left, right z-index影响。

二、相对定位relative:盒子现在位置距离盒子原来位置有一段偏移的距离。

相对定位方式,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用topbottomleftright进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

三、绝对定位absolute:盒子脱离html文档,相对于某一个拥有(相对定位和绝对定位)的父盒子来定位,如果盒子的父元素都没有(相对定位和绝对定位),它相对于根元素html来定位,(必须写默认的left值和top值,否则它的位置还在原来的位置.)

用绝对定位,一个元素可以放在页面上的任何位置,绝对定位方式,脱离文档流,不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位,如果其所有的父级元素都是static定位,那么此元素最终则是以当前窗口作为参考进行定位。可以使用top,bottom,left,right进行位置移动,亦可使用z-index在z轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变为块级元素,即可以直接设置其宽和高的值;如果该元素为块级元素,则其宽度会由初始的100%变为auto。

注意:当元素设置为绝对定位时,在没有指定top,bottom,left,right的值时,他们的值并不是0,这几个值是有默认值的,默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

四、 固定定位fixed:(一种特殊的绝对定位,也要写默认值)盒子相对于浏览器可视区域来定位。

固定定位和绝对定位一样,是完全脱离文档流的,不同的是,固定定位是相对于浏览器窗口,所以它不会随着页面而滚动

五、四个偏移属性:上偏移:top,right:右偏移,bottom:下偏移,left:左偏移。

总结:只有将元素的position设定为relative、absolute、或者fixed的时候,这个元素的top、bottom、right、left属性才会起作用。

六、 Z-index(层级)只作用于绝对定位和固定定位,z-index(层级)大的显示在 前面。(可以无限大)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值