几种常见定位及层级问题

 定位设置及属性
 定位:更高级的布局手段,所有元素都可以使用定位
          通过浮动,外边距都不能实现位置效果的时候,就使用定位
     
         属性:
         position
          取值:static (默认值没有设置定位)
                relative 相对定位
                    偏移时参考位置:元素本身的初始位置
                    特点:不会脱离标准文档流 初始位置继续占用

     
           定位元素:position值非默认值static
           定位元素的偏移:left、right、top、bottom
 几种常见定位使用
 属性:
            position
            取值:
               static 默认值,没有设置定位
               relative:相对定位 
                 偏移时参考位置:元素本身的初始位置 
                 特点:
                   1.不脱离标准文档流 
                   2.初始位置继续占用
                   3.会覆盖标准文档流里面的文本内容
               absolute:绝对定位
                 偏移时参考位置:离他最近的开启定位的祖先元素,如果没有祖先元素开启定位,参考变为body
                 特点:
                   1.margin:0 auto,水平居中和浮动没有效果
                   2.设置绝对定位的元素脱离标准文档流  
                   3.原来位置不会继续占用,后面标准文档流中的兄弟元素上移
                   4.会覆盖标准文档流里面的文本内容
                一般作为绝对定位的参考是是将祖先元素设置为相对定位
                fixed:固定定位,就是特殊的绝对定位
                 偏移时参考位置:浏览器视口
                 特点:
                    1.设置绝对定位的元素脱离标准文档流
                     3.原来位置不会继续占用,后面标准文档流中的兄弟元素上移  
   定位元素使用
              定位元素:position值非默认值static
              定位元素的偏移:left 、right、top、bottom 单位px;
   ## 粘滞定位
    粘滞定位
        sticky
        参考位置,离父元素的距离设置一致,就固定不动
        特点,不脱离标准文档流,原先位置继续占有
  层级
   设置定位元素的层级关系 z-index
        默认定位元素的初始层级为0
        同级的定位元素,后面的会覆盖前面的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值