绝对定位布局

position属性设置,能够实现横向多列布局及较为复杂的定位,比如带有遮罩层效果的提示框、固定层效果、全屏广告等。

position拥有3种定位形式:1、静态定位;2、相对定位;3、绝对定位。

position可以设置4个属性值:1、static(静态定位) 2、relative(相对定位) 3、absolute(绝对定位,属于绝对定位) 4、fixed(固定定位,属于绝对定位)

 

相对定位的特点

1、相对于自身原有位置进行偏移

2、仍处于标准文档流中(占位)

3、随即拥有偏移属性和z-index属性

 

当元素设置为绝对定位后,元素也会 多出两类属性:偏移量属性 和 Z-index属性

不同的是:

1.该元素已经脱离了标准文档流(不占位)

2.建立的定位基准不是该元素的原来位置,而是分两种情况

     2.1:没有设置偏移量:无论是否存在已定位的祖先元素,都保持在元素初始位置,脱离文档流,宽度塌陷(随内容变化而变化)

     2.2:设置了偏移量:又分两种情况(A.无已定位的祖先元素 B.有已定位的祖先元素)

               A.无已定位的祖先元素:它会以根节点(<html>)为偏移参照基准

              B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值