zoukankan      html  css  js  c++  java
  • position

    1、父集设置了relative,子集的absolute要设置top和left的值,不然父集的padding值会影响到子集的位置;

    #first{
    200px;
    height: 100px;
    border: 1px solid red;
    margin:40px;/*子集的位置不受祖先类的margin值得影响*/
    position: relative;

    padding:50px;
    }
    #second{
    200px;
    height:100px;
    border: 1px solid blue;
    position: absolute;
    top:20px; /*若不设置top和left的话,#first里的padding值会影响id=“second”的div的位置。若设置了则#first里的padding值就不会影响id=“second”的div的位置了,此时,id=“second”的div的位置只受祖先类的border进行的定位。  总结一下,就是absoulte是根据祖先类的border进行的定位,前提是absolute设置了top和left的值*/
    left:20px;
    }

    <div id="first">first
    <div id="second">second</div>
    </div>

    2、

    #first{
    200px;
    height: 100px;
    border: 1px solid red;
    margin:40px 400px;/*若margin:20px 30px;设置为固定值,则position:absolute的话,#first对应的div的位置不会受到影响。若margin:0 auto;则position:absolute的话,#first对应的div的位置会受到影响,具体表现为auto方向被改(左右方向),以#first对应的div的祖先类的border进行定位(这里的祖先应该是body了)*/
    position: absolute;

    padding:50px;
    }
    #second{
    200px;
    height:100px;
    border: 1px solid blue;
    position: absolute;
    top:20px;
    left:20px;
    }

    3、若子类为absolute且设置了top和left,但祖先类没有设置relative或者absolute的话,则以body的border定位。若祖先类有多个设置了relative或者absolute的话,则以最近祖先的border定位;

    4、通常写法

    #first{
    200px;
    height: 100px;
    border: 1px solid red;
    margin:0 auto;
    position: relative;
    padding:50px;
    }
    #second{
    200px;
    height:100px;
    border: 1px solid blue;
    position: absolute;
    top:20px;
    left:20px;
    }

  • 相关阅读:
    ClickHouse之访问权限控制
    ClickHouse之集群搭建以及数据复制
    ClickHouse之简单性能测试
    ClickHouse之初步认识
    从完整备份恢复单个innodb表
    MHA快速搭建
    MySQL 5.7最新版本的2个bug
    Greenplum各种Tips(不定时更新)
    MySQL 5.7贴心参数之binlog_row_image
    TCP窗口机制与流量控制
  • 原文地址:https://www.cnblogs.com/ouyangfeifei/p/5979375.html
Copyright © 2011-2022 走看看