五种定位——粘性定位

五种定位:
position:static;  
position:relative;
position:absolute;
position:fixed;
position:sticky;

static:静态定位,常规定位。此时top,bottom,left,right和z-index属性无效。
relative:相对定位。不改变页面布局下调整元素位置。
absolute:绝对定位。将元素移出常规文本流(即不为元素预留空间),相对于最近的非static定位的祖先元素偏移,可以设置外边距且不会与其他边距合并。通常使用时注意子绝父相。
父元素{
  position:relative;
}
子元素{
  position:absolute;
  top:10px;
  left:50px;
}
fixed:视口定位。将元素移出常规文本流(即不为元素预留空间),使元素相对于屏幕视口的位置来指定元素位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transformperspective 或 filter 属性非 none 时,容器由视口改为该祖先。
sticky:粘性定位。元素根据常规文本流定位,相对他的最近滚动祖先(nearest scrolling ancestor)和最近块级祖先,包括table-related元素进行偏移,且偏移不会影响其他元素。且也会创建新的层叠上下文。
层叠上下文:可以用z-index控制上下的。原理是对HTML元素构建一个三维思想,由屏幕引申到眼睛的一条Z轴。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值