定位
相对定位
相对定位 ： position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在文档流中
top ： 10px； 距离上方移动10px （向下）
left
bottom
right ：-20px； 距离右方移动-20px （向右）
html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="../定位/style.css">
</head>
<body>
<div class="box">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
<div class="div3">第三个盒子</div>
</div>
</body>
</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：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="../定位/style.css">
</head>
<body>
<div class="box">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
<div class="div3">第三个盒子</div>
</div>
</body>
</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;
html ：
<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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。