CSS定位属性

CSS定位属性

CSS有三种定位机制:普通流、浮动流和定位流,其中定位流为了实现一些层叠效果时需要的。定位属性position有5种,分别是:1.默认值:static 2.相对定位:relative 3.绝对定位:absolute 4.固定定位:fixed 5.黏性定位:sticky。

一、Position:Static
默认值,无定位效果,主要用于在取消元素之前的定位设置

二、相对定位:Position:relative
1.给元素加了相对定位以后,如果不给元素加定位偏移量的时候,不影响整体布局
2.相对定位不会使元素脱离正常文档流,空间会被保留
3.相对定位是相对于当前元素自身进行偏移的
4.相对定位需要给元素加top/bottom/right/left。
如:position:relative;top:100px;right:100px

三、绝对定位:Position:absolute
1.绝对定位会使元素脱离正常文档流
2.绝对定位是相对于有定位设置的祖先级元素进行偏移
3.默认情况下是相对于浏览器可视窗口显示
4.加了绝对定位的元素,使内联元素具备块元素特点,使块元素具备内联元素特点。
5.一般绝对定位是需要定义一个参照物,也就是包含块,如果祖先级元素定义成了包含块,那他就会相对于离他最近的祖先级元素进行绝对定位。一般推荐加Position:relative给祖先级元素定义成包含块。
在这里插入图片描述
.banner{background: url(…/img/banner.jpg) no-repeat;width:960px;height:330px;
position: relative;}

.banner ul{position:absolute;
bottom: 8px;right: 1px;}

四、固定定位:Position:fixed
1.固定定位使元素完全脱离文档流
2.加了固定定位的元素,使内联元素具备块元素特点,使块元素具备内联元素特点。
3.固定定位使相对于整个浏览器窗口进行偏移,不受滚动条和祖先级元素影响

4.一般用于页面中返回顶部的效果
在这里插入图片描述
.a9{position:fixed;right:0;top:50%;
margin-top:-56px;}

五、黏性定位:Position:sticky
黏性定位使用的最多就是制作吸顶效果,也就是当盒子在浏览器范围内的时候,水平方向的偏移效果跟relative是相同的,当滚动条滚动,盒子距离定位的间距符合top属性值的定义了,效果就跟fixed一样,从而实现吸顶效果。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
.main{width: 1000px;height: 100px;
background: red;position: sticky;top:0}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值