<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
200px;
height: 100px;
position: relative;
border: 1px dashed green;
}
/*点开头为类选择器 relative是相对定位,absolute是绝对定位，
一般父类是相对，子类是绝对 z-index表示堆叠顺序*/
.box2{
100px;
height: 50px;
position: absolute;
border: 1px dashed blue;
background-color: red;
z-index: -1;
top: 20px;
left: 20px;
}
p{
position: fixed;
top: 20px;
left: 10px
}
.box3, .box4, .box5, .box6, .box7, .box8{
100px;
height: 50px;
float: left;
}
.box3, .box6{
background-color:red;
}
.box4, .box7{
background-color:gold;
}
.box5, .box8{
background-color:green;
}
/*float 表示浮动。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
设置了浮动的元素，脱离标准流（脱标）。
行内元素设置浮动可以设置宽高。
块级元素设置浮动可以在一行显示。*/
/*p 是标签选择器 fixed是规定位置，是相对与浏览器视口本身的定位*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级</p>
<div class="box3">
我是块级元素1
</div>
<div class="box4">
我是块级元素2
</div>
<div class="box5">
我是块级元素3
</div>
<span class="box6">我是行内元素4</span>
<span class="box7">我是行内元素5</span> <!--span是用来组合行内元素-->
<span class="box8">我是行内元素6</span>
</body>
</html>