1.小米最上部导航栏设置
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}/*取消前面的点*/ul{list-style: none;}.nav{width: 960px;overflow: hidden;margin: 50px auto;background-color: purple;/*设置圆角*/border-radius: 5px;}.nav ul li{float: left;width: 160px;height: 40px;line-height: 40px;text-align: center;}.nav ul li a{width: 160px;height: 40px;display: block;color: white;font-size: 14px;text-decoration: none;}.nav ul li a:hover{background: yellow;color: green;text-decoration: underline;}</style></head><body><div class="nav"><ul><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li></ul></div></body></html>
2.导航栏定位问题（position）
有3种方式：
相对定位
固定定位
绝对定位
2.1相对定位（relative）
相对自己原来的位置进行定位，自己原来的位置作为参考点
使用relative下的top,left进行定位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{border: 1px solid green;}div{width: 200px;height: 200px;background-color: red;position: relative;top: 30px;left: 30px;}</style></head><body><div></div></body></html>
使用相对定位可以来进行后续表单位置设计
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.t{font-size: 30px;}.xiaoming{position: relative;top: 4px;}</style></head><body><div><input type="text" class="t"><input type="text" class="xiaoming"></div></body></html>
2.2绝对定位（absolute）
一般情况下：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
以父辈盒子作为参考点：
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点（父相子绝）
2.如果父亲设置了定位，那么以父亲为参考点。
例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.wrap{width: 400px;height: 400px;padding: 100px;background-color: yellow;position: relative;}.container{width: 500px;height: 500px;background-color: green;position: relative;padding: 20px;}.box1{width: 200px;height: 200px;background-color: red;position: absolute;top: 100px;left: 50px;}</style></head><body style='height: 2000px;'><div class="wrap"><div class="container"><div class="box1"></div></div></div></body></html>
绝对定位下盒子居中问题：
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中
父元素相对定位，子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中（父相子绝）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0;margin: 0;}.nav{width: 960px;height: 49px;background-color: purple;position: absolute;left: 50%;margin-left: -480px;}</style></head><body><div class="nav"></div></body></html>
2.3固定定位（fixed）
设置固定定位，用top描述，那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点(做小广告用的)
固定定位，点击后返回顶部：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>p{width: 100px;height: 100px;background-color: red;position: fixed;bottom: 0;right: 50px;line-height: 100px;text-align: center;color: white;}</style><script src="/jquery/3.3.1/jquery.min.js"></script></head><body><div class="wrap"><p><a href="#">回到顶部</a></p><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""></div><script>$(function(){$('p').click(function(){$('html').animate({"scrollTop":0},1000)})})</script></body></html>
2.4关于盒子之间的垂直居中解决思路：
基础版：
.parent {width:800px;height:500px;border:2px solid #000;position:relative;}.child {width:200px;height:200px;/*(500-200)/2*/margin-top:150px;margin-left: 300px;position: absolute; background-color: red;}
第一种：
.parent {width:800px;height:500px;border:2px solid #000;position:relative;}.child {width:200px;height:200px;margin: auto; /*必须是auto*/position: absolute; top: 0; bottom: 0; left: 0; right: 0;background-color: red;}
第二种：
.parent {width:800px;height:500px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;}.child {width:200px;height:200px;display:inline-block;background-color: red;}
第三种：
.parent {width:800px;height:500px;border:2px solid #000;display:flex;justify-content:center;align-items:center;}.child {width:200px;height:200px;background-color: red;}
第四种：
.parent {width:800px;height:500px;border:2px solid #000;position:relative;}.child {width:300px;height:200px;margin:auto;position:absolute;/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/left:50%;top:50%;margin-left: -150px;margin-top:-100px;background-color: red;}
3.z-index（用于涂层之间的遮盖） 注意这里是用于涂层之间啊，没有涂层何谈遮盖
z-index 值表示谁压着谁，数值大的压盖住数值小的
只有定位了的元素，才能有z-index（浮动元素无法使用）
index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素
也具有从父现象
z-index只决定同一父级下的子元素之间的堆叠顺序。用这个必须得留心一下，否则盖不住
例1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: green;position: relative;top: 50px;z-index: 10;}.box3{width: 200px;height: 200px;background-color: yellow;position: relative;z-index: 8;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>
z-index的应用：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}ul{list-style: none;}/*设置图片与固定栏间的距离*/body{padding-top: 40px;}.nav{width: 100%;height: 40px;background-color: black;position: fixed;top: 0;left: 0;z-index: 99999; /*数值最大，谁也无法压盖住固定栏*/}.wrap{width: 960px;overflow: hidden;margin: 0px auto;background-color: purple;border-radius: 5px;}.wrap ul li{float: left;width: 160px;height: 40px;line-height: 40px;text-align: center;}.wrap ul li a{width: 160px;height: 40px;display: block;color: white;font-size: 14px;text-decoration: none;}.wrap ul li a:hover{background: yellow;color: green;text-decoration: underline;}p{position: relative;}</style></head><body style="height: 3000px"><div class="nav"><div class="wrap"><ul><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li></ul></div></div><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><p>哈哈哈哈哈哈哈哈</p><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""><img src="./timg.jpg" alt=""></body></html>
