<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素定位</title>
<style>
/*
1、属性
position:;
2、属性值
1)static 静态定位 默认值
2)relative 相对定位
相对自己的原位置定位
定位后原位置保留
移动配合 left,right,top,bottom
应用场景
1)自己小范围的移动
2)配合绝对定位使用
3)absolute 绝对定位
绝对定位相对于已经的定位的父元素定位
如果父元素没有定位,逐级往上找,最后相对于body定位
定位后原位置不保留
移动配合 left,right,top,bottom
应用场景
1)形成独立的一层
推荐:给父元素添加相对定位
4)fixed 固定定位
相对于浏览器窗口定位
定位后原位置不保留
*/
.box{
height: 600px;
width: 600px;
background-color: deepskyblue;
margin: 50px;
position: relative;
}
.one{
width: 200px;
height: 200px;
background-color: palegreen;
position: absolute;
left: 50px;
top: 50px;
}
.two{
width: 200px;
height: 200px;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>