定位position
1.將元素移動擺到想要的位置上去
2.可選值：
1.static:默認值，不打開定位
2.relative:相對定位
3.absolute:絕對定位
4.fixed：固定定位
相對定位relative
position:relative;
left: ;right: ;
top: ;bottom: ;
相對定位是相對于原來的位置移動，！給出的值不是移動方向
相對定位開啟后沒有脫離文檔流
相對定位會讓元素上升一個層級，移動的元素會蓋住原來的元素
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
????<style?type="text/css">
????.box1{
????????width:?200px;
????????height:?200px;
????????background-color:?blueviolet;?
????}
????.box2{
????????width:?200px;
????????height:?200px;
????????background-color:blue;
????????position:?relative;
????????left:?100px;
????????bottom:?100px;
????????opacity:?0.5;/*可以設置透明度*/
????}
????.box3{
????????width:?200px;
????????height:?200px;
????????background-color:?blanchedalmond;
????????position:?relative;
????????left:?200px;
????????bottom:?200px;
????????opacity:?0.5;
????}
????</style>
</head>
<body>
????<div?class="box1"></div>
????<div?class="box2"></div>
????<div?class="box3"></div>
</body>
</html>
效果：
