定位流
1、相对定位就是相对于自己以前在标准流中的位置来移动
格式：
position：relative
需要配合一下四个属性一起使用
top：20px
left：30px
right：40px
bottom：50px
=======================图=============================
示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
position: relative;
top: 20px;
left: 20px;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1.1相对定位的注意点
1)、在相对定位中同一个方向的定位属性只能使用一个
top/bottom 只能使用一个
left/right 只能使用一个
2）、相对定位是不脱离标准流的，会继续在标准流中占用一份空间
3）、由于相对定位是不脱离标准流的，所以在相对定位流中式区分块级，行内，行内块级元素的
4）、由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding
等属性时会影响到标准流的布局，即，给相对定位的标签设置margin或padding，是以该标签原来的位置为基础来进行偏移的。
================================图================================
示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
position: relative;
top: 20px;
left: 20px;
/*相对于该标签原来的位置进行偏移*/
margin-top: 50px;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1.2、相对定位的应用场景
1）、用于对元素进行微调
2）、配合后面学的绝对定位来使用
===============================图==========================
示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
input {
width: 200px;
height: 50px;
}
input:focus { /*输入框获取焦点也即是点击时的样式，背景颜色*/
outline: none;
background-color: #eee;
}
img {
height: 50px;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<input type="text" name="call" placeholder="请输入图片中的验证码">
<img src="call.jpeg" alt="">
</body>
</html>
2、绝对定位就是相对于body或者某个定位流中的祖先元素来定位
===============================图=================================
示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
position: absolute;
/*left: 0;*/
/*top: 10px;*/
background-color: green;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2.1、绝对定位的参考点
1）、默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点
2）、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
2.1）只要是这个绝对定位元素的祖先元素都可以
2.2）祖先元素必须是定位流，此处的定位流指的是绝对定位，相对定位，固定定位（定位流中只有静态定位不行）
2.3）如果一个绝对定位的元素有祖先元素，而且祖先元素中有多个元素都是定位流，那么这个绝对定位流的元素会以离它最近的那个定位流的祖先元素作为参考点
默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
.box2 {
width: 2000px;
height: 100px;
background-color: green;
}
.box3 {
width: 100px;
height: 2000px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2.2、绝对定位的注意点
1）、绝对定位的元素是脱离标准流的，所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
2）、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点，会相对于body定位会随着页面的滚的那个而滚动。
3）、一个绝对定位的元素会忽略祖先元素的padding。
绝对定位相对于body定位是以首屏为准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
.box2 {
width: 2000px;
height: 100px;
background-color: green;
}
.box3 {
width: 100px;
height: 2000px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
#一个绝对定位的元素会忽略祖先元素的padding
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
padding: 20px;
}
.box2 {
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.3、绝对定位水平居中
1）、注意当一个盒子绝对定位之后不能使用margin：0 auto；让盒子自身居中
2）、如果相让一个绝对定位的盒子自身居中，可以使用left：50%；margin-left:负元素宽度一半px；
示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 50px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
2.4、绝对定位的应用场景
1）、用于对元素进行微调
2）、配合相对定位来使用
企业开发中一般相对定位和绝对定位都是一起出现的，很少单独使用=====子绝父相
那为何要子绝父相呢，请看下图
===========================图=============================
3、固定定位
1）、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）
背景的关联方式background-attachment：fixed；可以让图片不随着滚动条的滚动而滚动
而固定定位可以让某一个元素不随着滚动条滚动而滚动
2）、注意点
· 固定定位，就时相对于浏览器窗口定位，页面如何滚动，这个盒子显示位置不变。
· 固定定位的元素是脱离标准流的，不会占用标准流中的空间。
· 固定定位和绝对定位一样不区分行内、块级、行内块级。
· E6不支持固定定位
示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.bg {
width: 600px;
height: 1000px;
border: 1px solid #000;
background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
border: 1px solid #000;
border-radius: 50%;
text-align: center;
line-height: 100px;
background-color: green;
position: fixed;
right: 0;
bottom: 0;
}
.box3 {
background-color: blue;
}
.box4 {
background-color: yellow;
height: 2000px;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="box1"></div>
<div class="box2">回到顶部</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
固定定位应用场景
· 网页对联广告
· 网页头部通栏（穿透效果）
=======================图===========================
4、静态定位
1）、什么是静态定位？
默认情况下标准流中的元素position 属性就等于static，所以静态定位其实就是默认的标准流。
5、z-index
1）、z-index属性：用于指定定位的元素的覆盖关系
1.1）、z-index值表示谁压着谁，数值大的压盖着数值小的。
1.2）、只有定位了的元素，才能有z-index值，也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index值，而浮动的东西不能用。
1.3）、z-index值没有单位，就是一个正式，默认的z-index值是0
1.4)、如果大家都没有z-index值（默认所有元素z-index值为0），或者z-index值一样，那么
谁卸载HTML后面，谁在上面能压住别人，定位了的元素，永远能都压住没有定位的元素。
2）、注意点：仓父现象（父亲怂了，儿子再牛逼也没用）
父元素没有z-index值，那么子元素谁的z-index值大谁盖谁
父元素z-index值不一样，那么父元素谁的z-index值大谁盖谁
简单说，父元素有z-index值就比父元素的值，子元素的值再大也不管用，
父元素没有值，就比子元素的z-index值。
