CSS定位(position)

作者: 招投标秘籍 | 来源:发表于2021-01-31 09:07 被阅读0次

    前言

    今天要开启新的知识点了 希望对大家会有帮助~~

    给盒子设置背景,背景色在外边沿围成的区域(而不是内部)

    .dem{
     box-sizing:border-box;
      border:5px solid rgba(235,0,0,0.1) ;
      padding:12px;
      margin:10px;
      height:100px;
      width:100px;
     background:blue;
      }   
    
    <body>
    <div class="dem">你好</div>
     </body>
    
    image.png

    div分层

    image.png
    image.png

    html

    <div class="dem ">你好
            <div class="float" ></div> 
             <div class="dem-3 "></div>
             </div>
    

    CSS

      .dem{
     box-sizing:border-box;
      border:5px solid rgba(235,0,0,1) ;
      padding:12px;
      margin:10px;
      height:200px;
      width:200px;
     background:blue;
    font-size:20px;
      color:red;
    }
    .float{
      background: green;
      height:40px;
      float:left;
    border:1px solid red;
      width:20px;
    }
    .dem-3{
      border:1px solid green;
      background: white;  
      width:25px;
    height:25px;
     margin:-12px
    }
    
    image.png
    (网页链接:http://js.jirengu.com/bocanaramo/1/edit)

    position属性

    1. position:static(默认的属性)
    2. position:relative(相对定位升起来 不脱离文档流 使用场景:用于做位移 给absolute做爸爸元素)
    3. position:absolute(绝对定位,基准是祖先元素中非static的 使用场景:对话框的关闭按钮和鼠标提示)
      html
     <div class="container clearfix">
            <div class="dem1"></div>
            <div class="dem2"></div>
            <div class="dem3"></div>
            <span class="close">X</span>
            <button>点击
            <span  class="tips">提示内容</span>
            </button>
            
            </div>
    

    CSS

       *{box-sizing:border-box;}
      .container{
      border:1px solid red;
      height:300px;
      position:relative;
      padding:20px;
      }
    .clearfix:after{
      content:'';
      clear:both;
      display:block;
      }
    .dem1{
      border:1px solid green;
      height:40px;
      width:40px;
      background:green;
      position:relative;
      top:10px;
      z-index:0;
    }
    .dem2{
      border:1px solid red;
      height:40px;
      width:40px;
      background: #000;
      position:relative;
      z-index:-1;
    }
    .dem3{
      border:1px solid white;
      height:80px;
      width:80px; 
    }
    .close{
      position:absolute;
      top:0px;
      right:0px;
      border:1px solid red
    }
    button{
      position:relative;
     }
    .tips{
    position:absolute;
    bottom:100%;
    white-space:nowrap;
    left:50%;
    margin-left:-26px;
    }
    button span{
      display:none;
    }
    button:hover span{
      display:inline-block
    } 
    
    image.png
    (网页链接:http://js.jirengu.com/yazozacoko/1/edit
    1. position:fixed(相对于视口方向定位有诈 使用场景:烦人的广告 回到顶部按钮)
      html
    <div class="container clearfix">
            <div class="fixed">▲</div>
            
      </div>
    

    css

           *{box-sizing:border-box;}
    .container{
      border:1px solid red;
      height:300px;
    }
    .fixed{
      border:1px solid green;
      width:50px;
      height:50px;
      display:flex;
      justify-content:center;
      align-items:center;
    font-size:30px;
    }
    .fixed{
      left:10px;
      bottom:10px;
      position:fixed;
    }
    
    image.png
    (网页链接:http://js.jirengu.com/degumefako/1/edit
    1. position:sticky(粘性定位元素)

    小经验

    1. 写了absolute和fixed一定补top和left
    2. 善用left:100%
    3. 善用left:50%和负margin

    层叠上下文(z-index=(0,1,2,-1,-2)

    image.png

    本文为本人的原创文章,著作权归本人和饥人谷所有,转载务必注明来源.

    相关文章

      网友评论

        本文标题:CSS定位(position)

        本文链接:https://www.haomeiwen.com/subject/yspyzktx.html