CSS定位(position)
2021-01-31 本文已影响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属性
- position:static(默认的属性）
- position:relative（相对定位升起来 不脱离文档流 使用场景：用于做位移 给absolute做爸爸元素）
- 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）
- 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）
- position:sticky(粘性定位元素)
小经验
- 写了absolute和fixed一定补top和left
- 善用left:100%
- 善用left:50%和负margin
层叠上下文(z-index=(0,1,2,-1,-2)
image.png
本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.
