absolute定位
————————————脱离原来位置的定位
补充：opacity（透明度0-1） 园的写法 border-color:;
一旦一个标签被absolut定位后就跑到了上一个层级
html--
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="2.css">
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
css--
*{
margin: 0;
padding: 0;
}
.demo{
position:absolute;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.box{
width: 150px;
height: 150px;
background-color: green;
}
定位后：
定位前：
relative定位
——————————————保留原来位置进行定位
*{
margin: 0;
padding: 0;
}
.demo{
position: relative;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.box{
width: 150px;
height: 150px;
background-color: green;
}
absolute相对于最近有定位的父级进行定位，否则相对于文档定位
relative相对于自己原来位置进行定位
一般用relative作为参照物用absolute进行定位
fixed固定定位
position：fixed 随着页面动它不动
（居中的固定写法）
left：50%；
top：50%；
层级的大小
z-index：；（不说明默认为零）