<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位</title>
<style>
*{ /* 通配符 */
padding:0;
margin:0;
}
.bigbox{
/* 相对定位:相对于自身的位置偏移 */
/* position: relative;
top:150px;
right:100px; */
/* 绝对定位:相对于有定位的父盒子来偏移,如果所以
父盒子都没有定位,就相对于body(网页)来偏移 */
/* 大相小绝/子绝父相 */
position:absolute;
top:150px;
right:100px;
width:800px;
height:800px;
border:5px dotted orangered;
}
.bigbox div{
width:200px;
height:200px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: rosybrown;
}
.box3{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<!-- 定位:给元素固定位置
定位:相对定位、绝对定位、固定定位
边偏移:left/top/bottom/right-->
<div class="bigbox">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
颜色透明度:rgba(红色,绿色,蓝色,透明度)
opacity:0—1 ;透明度,所以子元素都会被透明。
固定位置:position:fixed; 以网页偏移