CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
(1)相对定位
概念
被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
普通流html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="User.css">
</head>
<body>
<div class="box1">javascript</div>
<div class="box2">Java</div>
<div class="box3">HTML</div>
</body>
</html>普通流css代码
.box1 {
background-color:rebeccapurple;
width:100px;
height:100px;
}
.box2 {
background-color:yellow;
width:100px;
height:100px;
position:relative;
left:200px;
}
.box3 {
background-color:blue;
width:100px;
height:100px;
position:relative;
right:20px;
}
效果显示
(2)绝对定位
概念
绝对定位的框可以从它的包含块向上、右、下、左移动。绝对定位的框脱离普通流，它可以覆盖页面上的其他元素，同时它也可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="User.css">
</head>
<body>
<div class="box1">javascript</div>
<div class="box2">Java</div>
<div class="box3">HTML</div>
</body>
</html>css代码
* {
margin:200px;
padding:0px;
}
.box1 {
width:200px;
height:200px;
background:#ff0000;
}
.box2 {
width:30%;
height:30%;
background:#00ff90;
top:10px;
left:100px;
position:absolute;
}
.box3 {
width:60%;
height:60%;
left:400px;
top:400px;
left:300px;
position:absolute;
background:#ffd800;
}显示效果
希望这篇文章可以帮助到热爱编程的小伙伴！