<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
.a{
width: 300px;
height: 300px;
background-color: red;
/* 相对定位 */
/* 相对定位的元素占位置，占的是未移动前的位置 */
/* 坐标原点是初始位置的左上角 */
position: relative;
/* 值为正时向右走 */
left:40px;
/* 值为正时向下走 */
top:40px;
/* 固定定位 */
/* 固定定位的元素不占位置 */
/* 坐标原点是body的左上角 */
position:fixed;
left:0;
top:0;
}
.b{
width: 300px;
height: 300px;
background-color: blue;
}
.a p{
width: 100px;
height: 50px;
background-color: yellow;
/* 绝对定位 */
/* 绝对定位元素不占位 */
/* 坐标原点，先向上看，看其父级是否使用了相对定位，如果父级使用了相对定位，那么坐标原点就是其父级的左上角， */
/* 如果没使用就是body的左上角 */
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div class="a">
<p>hello world</p>
</div>
<div class="b"></div>
</body>
</html>
