续弹性盒子模型
介绍弹性盒子的一些属性(基本属性以及布局(重要：定位))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/弹性盒子.css">
</head>
<body>
<div class="parent">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>/*3、justify-content 控制弹性盒子内子元素的分布方式
flex-start：位于开始位置
flex-end:位于结束位置
center:位于中间位置
space-between:空白位于元素之间
space-around:空白位于元素周围
*/
/*1、flex-direction:控制弹性盒子内子元素的排列方向 row row-reverse column column-reverse 默认row*/
/*2、flex-wrap：控制弹性盒子内子元素是否换行 wrap换行 nowrap不换行;*/
/* 4、align-items:控制弹性盒子内子元素垂直方向的对齐方式 flex-start flex-end; center*/
/* 5、align-content控制弹性盒子内多行元素分布方式 flex-start flex-end center space-between space-around*/
.parent{
width:800px;
height: 1300px;
background-color: pink;
/* display: flex; */
/* flex-direction:row-reverse; */
/* flex-wrap: wrap; */
/* justify-content:space-around; */
/* align-items: center; */
/* align-content: space-around; */
position: relative;
}
/* position用于设置定位模式 */
/* static：静态模式（默认）*/
/* fixed：固定模式 特点：释放原来的空间,不随浏览器的滚动而滚动,参考整个浏览器 */
/* relative:相对模式 特点：不释放原来的空间 随浏览器的滚动而滚动 参考自己原来的位置*/
/* absolute:绝对模式 特点：释放原来的空间 随浏览器的滚动而滚动 参考整个浏览器*/
/* 结合模式 父级元素用相对模式（relative） 子集元素用绝对模式（absolute）
特点：释放原来的空间 随浏览器的滚动而滚动 参考父级元素*/
.left{
width:200px;
height: 100px;
background-color: yellow;
position: absolute;
top:5px;
left:90px;
z-index: 6;
}
/* z-index 设置定位层级，值越大越靠上 */
.middle{
width:200px;
height: 100px;
background-color: purple;
position: absolute;
top:20px;
left:80px;
/* bottom: 50px;
right:100px; */
z-index: 10;
}
.right{
width:200px;
height: 100px;
background-color:greenyellow;
position: absolute;
top:50px;
left:60px;
z-index: 1;
}