CSS定位(position)

前言

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

给盒子设置背景，背景色在外边沿围成的区域（而不是内部）

.dem{
 box-sizing:border-box;
  border:5px solid rgba(235,0,0,0.1) ;
  padding:12px;
  margin:10px;
  height:100px;
  width:100px;
 background:blue;
  }   

你好
 

image.png

div分层

image.png

image.png

html

你好
        
 
         

         

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

 

        

        

        

        X
        点击
        提示内容
        
        
        

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）

4. position:fixed(相对于视口方向定位有诈 使用场景：烦人的广告 回到顶部按钮）
   html

        
▲
        
  

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）

4. position:sticky(粘性定位元素)

小经验

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

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

image.png

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