<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.a{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
/* 相对定位 */
/* position: relative; */
/* left: 40px; *//* left数值为正时，元素向右走 */
/* top: 40px; *//* top数值为正时，元素向下走 */
/* 相对定位的元素占位置，占的是未移动前的位置 */
/* 坐标原点是初始位置左上角 */
/* position: fixed; *//* 固定定位 */
/* left: 0;
top: 0; */
/* 固定定位的元素不找位置，坐标原点时body的左上角 */
}
/* .b{
width: 300px;
height: 3200px;
background-color: #89ff52;
} */
.a p{
width: 100px;
height: 40px;
background-color: #ff6ec5;
/* 绝对定位 */
position: absolute;
left: 0;
top: 0;
/* 绝对定位元素不占位置 坐标原点在先向上，看其父级是否使用了相对定位，
如果父级使用了相对定位，那么其坐标原点就是其父级的左上角
如果没有使用坐标原点是body；*/
}
</style>
</head>
<body>
<div class="a">
<p>hello word</p>
214645165
</div>
<!-- <div class="b">
</div> -->
</body>
</html>
