今天周日，在家休息，没有约饭，那就写写CSS中定位的几种方式吧
复杂的网页布局都是通过网页元素灵活定位实现，网页里面各种元素定位都有自己的特点。废话不多说，言简意赅开始了：（！！！搭配代码理解，大家可以上号理解哦！！！）
float定位（即浮动定位）：
定位方式很简单，只要规定浮动方向
例如： float:left //就是代表元素向左摆放
它的定位是相对于父元素容器
如果元素设置了浮动，后面的则会受到浮动的影响，需要后面元素不受影响，则要在后面清除浮动
（可用clear：both）或给父元素设置overflow:hidden;
position定位： position定位是指定位置的定位，为下几种常用：
1.static （静态定位） 不能通过方位属性移动，这种定位方式用margin来改变位置，对 left,top,z-index等设置无效 占位置 不脱离文档流
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
/* 1 定位方式 */
position: static;
left: 20px;
top: 50px;
background-color: red;
}
.blue {
background-color: blue;
}
/*
特点
静态定位就是普通的标准流,设置偏移值无效
*/
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
2.relative (相对定位) 该定位是一种相对定位，可以通过属性方位移动，这种定位 占位置 不脱离文档流
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
/*
定位方式
偏移值 */
/* 相对定位 */
position: relative;
left: 40px;
top: 50px;
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
/*
特点
1 需要配合方位属性来移动位置
2 想对于自身原来的位置进行移动
3 在页面中占位置-没有脱标
*/
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
3.absolute (绝对定位) 该定位相对下雨最近的祖先元素移动 （这种定位通常设置父元素为relative定位来配合使用）：#子绝父相# 在没有父元素的情况下参照body， 该定位不占位置脱离文档流
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
/* 定位方式 */
/* 绝对定位 */
position: absolute;
/* right: 0;
top: 0; */
right: 0;
bottom: 0;
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
4.fixed (固定定位)：这种定位相对于浏览器的可视区域进行移动，可以通过属性方位移动 ，通常用来显示提示信息，该定位脱离文档流
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: fixed;
left: 20px;
top: 20px;
width: 100px;
height: 300px;
background-color: green;
}
/*
特点
1 需要配合方位属性来移动位置
2 相对于浏览器的可视区域进行移动位置
3 不占位置-脱标
*/
</style>
</head>
<body>
<div class="box"></div>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
<p>每天都要开心，加油哦</p>
</body>
</html>
