标签：固定 指定 span plain back lang line racket charset
相对定位 ： position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在文档流中
top ： 10px； 距离上方移动10px （向下）
left
bottom
right ：-20px； 距离右方移动-20px （向右）
html ：
css ：
.box{
margin: 0;
padding: 0;
width: 200px;
height: 70px;
border: 1px solid #779dbd;
}
?
.div1{
background: #779dbd;
border: 1px solid #779dbd;
?
/*
相对定位 ： position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在文档流中
top ： 10px； 距离上方移动10px （向下）
left
bottom
right ：-20px； 距离右方移动-20px （向右）
*/
position: relative;
right: -20px;
}
?
.div2{
background: #2f70ff;
border: 1px solid #2f70ff;
position: relative;
top: 10px;
}
?
.div3{
background: #80D0C7;
border: 1px solid #80D0C7;
}
绝对定位 ： position: absolute;
1.没有父级元素定位的前提下，相当于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不存在标准文档流中，原来的位置不会被保留
父级定位：
.box{
margin: 0;
padding: 0;
width: 200px;
height: 70px;
border: 1px solid #779dbd;
position: relative;
}
绝对定位：
.div3{
background: #80D0C7;
border: 1px solid #80D0C7;
position: absolute;
left: 300px;
}
html：
css：
.box{
margin: 0;
padding: 0;
width: 200px;
height: 70px;
border: 1px solid #779dbd;
position: relative;
}
?
.div1{
background: #779dbd;
border: 1px solid #779dbd;
?
/*
相对定位 ： position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在文档流中
top ： 10px； 距离上方移动10px （向下）
left
bottom
right ：-20px； 距离右方移动-20px （向右）
*/
/*position: relative;
right: -20px;*/
}
?
.div2{
background: #2f70ff;
border: 1px solid #2f70ff;
/*position: relative;
top: 10px;*/
}
?
.div3{
background: #80D0C7;
border: 1px solid #80D0C7;
?
/*
绝对定位 ： position: absolute;
1.没有父级元素定位的前提下，相当于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不存在标准文档流中，原来的位置不会被保留
*/
position: absolute;
left: 300px;
}
固定定位 ： position: fixed;
<div class="div4">div4</div>
<div class="div5">div5</div>
css：
.div4{
width: 100px;
height: 100px;
background: #c3d23b;
border: 2px solid #c3d23b;
position: absolute;
right: 0;
bottom: 0;
}
?
.div5{
width: 50px;
height: 50px;
background: #ce3939;
border: 2px solid #ce3939;
?
/*固定定位 ： position: fixed;*/
position: fixed;
right: 0;
bottom: 0;
}
标签：固定 指定 span plain back lang line racket charset
原文地址：https://www.cnblogs.com/qqyzml/p/14939618.html
