您现在的位置是:门户> 编程语言> HTML/CSS

CSS关于相对定位和绝对定位的说明实例
2020-05-22 10人围观 0条评论
简介CSS关于相对定位和绝对定位的说明实例


    body
    {margin: 30px; font-size:9pt;}

    .a, .b, .c, .d, .e
    {
       width: 100px;
       height: 100px;
       margin: 5 auto;
       color: #fff;
       background: #000;
    }
    .aa, .bb, .cc, .dd, .ee
    {
       top: 10px;
       left: 10px;
       width: 10px;
       height: 10px;
       overflow: hidden;
       background: #F90;
    }
    .b, .d, .e
    {position: relative;}
    .cc, .dd, .ee
    {position: absolute;}


      

       A:均不设置postion,一般嵌套关系


      

       B:仅外div设置relative,一般嵌套关系


      

       C:仅内div设置absolute,文档中为嵌套关系,页面中内div浮起[非float],相对于页面定位,与外div无关。



    body
    {margin: 30px; font-size:9pt;}

    .a, .b, .c, .d, .e
    {
       width: 100px;
       height: 100px;
       margin: 5 auto;
       color: #fff;
       background: #000;
    }
    .aa, .bb, .cc, .dd, .ee
    {
       top: 10px;
       left: 10px;
       width: 10px;
       height: 10px;
       overflow: hidden;
       background: #F90;
    }
    .b, .d, .e
    {position: relative;}
    .cc, .dd, .ee
    {position: absolute;}


      

       A:均不设置postion,一般嵌套关系


      

       B:仅外div设置relative,一般嵌套关系


      

       C:仅内div设置absolute,文档中为嵌套关系,页面中内div浮起[非float],相对于页面定位,与外div无关。


      

       D:外div设置relative,内div设置absolute,内div浮起来并相对于外div定位



      

       D:外div设置relative,内div设置relative,内div浮起来并相对于外div定位


      

       E:这个是说明边界问题。-10 != 反向10px间距

分享:

文章评论