absolute定位元素的特点

1.什么是定位元素?

  • 就是元素的position属性值为:fixedabsoluterelative三其者之一,则为定位元素。
  • 那么static的元素呢?为常规流元素。网页布局中,元素的排列方式一般三种,常规流,浮动,定位

2.absolute元素的特点

  • 其元素的最大宽度是其包含块的宽度(离他最近的定位的父元素的宽度)
  • top,left等定位属性是相对于包含块的padding定位的。
  • 还有一个非常重要的特性:具有相对特性的无依赖绝对定位。这个本质:就是设置元素position:absolute后,再设置margin属性。而不设置top,left等定位属性。(这里的相对是相对于自己的初始位置进行定位。个人理解:就是设置margin属性之前的位置
  • 该元素变为块盒,即display值为block。
  • 不设置width值,并且left,right设置值为0时,该定位元素宽度撑满整个父容器。height如果不设置,并且top,bottom为0时,该定位元素高度会占据整个父容器高度
  • 通过设置元素如下属性,实现网页布局水平、垂直居中。:
    在这里插入图片描述
  • 当z-index为负值,遇到常规流和浮动元素,会被其覆盖。
  • 一定不是浮动元素。绝对定位优先级比浮动高
  • 无外边距合并。

3.absolute和overflow元素关系

  • 如果overflow所在元素同时也是定位元素,里面的绝对定位元素会被裁剪。
  • 如果overflow所在元素为定位元素父级元素,并且,他们之间还存在其他定位元素,那么该定位元素会被裁剪。
    (上述两点我的理解就是:overflow元素如果处在常规流中,那么必须能约束到绝对定位元素的包含块才行。或者本身变为定位元素那么就能约束到绝对定位元素)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值