一 相对定位
如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、
只有一个作用：父相子绝
不要使用相对定位来做压盖现象
二种现象：
1.不脱标
2.形影分离
实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>相对定位</title> 6 <style> 7 div{ 8 200px; 9 height: 200px; 10 } 11 .box1{ 12 background-color: red; 13 } 14 .box2{ 15 background-color: black; 16 position: relative; 17 top: 200px; 18 left: 0px; 19 } 20 .box3{ 21 background-color: yellow; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="box1"></div> 27 <div class="box2"></div> 28 <div class="box3"></div> 29 </body> 30 </html>
二 绝对定位
现象：
1.设置绝对定位的盒子，脱离标准流
参考点：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。（爱立信）
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，
影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，
不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。
当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，
实现绝对定位盒子居中
实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绝对定位</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .father{ 12 500px; 13 height: 500px; 14 background-color: green; 15 position: relative; 16 /*向下走50px*/ 17 top: 50px; 18 /*向右走100px*/ 19 left: 100px; 20 21 } 22 .father2{ 23 300px; 24 height: 300px; 25 background-color: yellow; 26 position: relative; 27 padding: 30px; 28 margin-left: 30px; 29 /*top: 10px;*/ 30 /*left: 10px;*/ 31 } 32 .box1{ 33 34 35 200px; 36 height: 200px; 37 background-color: red; 38 position: absolute; 39 top: 10px; 40 left: 10px; 41 } 42 43 </style> 44 </head> 45 <body style="height: 2000px"> 46 <div class="father"> 47 <div class="father2"> 48 <div class="box1"> 49 50 </div> 51 </div> 52 </div> 53 54 55 </body> 56 </html>
三 固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
实例：做了一个固定导航栏
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定定位</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 11 } 12 body{ 13 padding-top: 80px; 14 } 15 .head{ 16 100%; 17 height: 80px; 18 background-color: rgba(0,0,0,.5); 19 position:fixed; 20 top: 0; 21 left: 0; 22 z-index: 999; 23 } 24 .head p{ 25 margin-left: 600px; 26 } 27 .wrapper{ 28 100%; 29 height: 500px; 30 background-color: red; 31 } 32 .top{ 33 100px; 34 height: 100px; 35 background-color: black; 36 position: fixed; 37 bottom: 20px; 38 right: 20px; 39 line-height: 100px; 40 text-align: center; 41 } 42 body{ 43 height: 2000px; 44 } 45 46 </style> 47 </head> 48 <body> 49 <div class="head"> 50 <p>导航栏</p> 51 </div> 52 <div class="wrapper"> 53 中心内容 54 <p style="position: absolute; color: black;background-color: white;"></p> 55 </div> 56 <a href="#"> 57 <div class="top"> 58 返回顶部 59 </div> 60 </a> 61 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"> 62 63 </script> 64 65 <script type="text/javascript"> 66 $('.top').click(function(){ 67 $('html,body').animate({ 68 scrollTop: '0' 69 },2000); 70 71 }); 72 73 74 75 76 77 </script> 78 </body> 79 </html>
四 父相子绝案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>父相子绝案例</title> 6 <style> 7 *{ 8 padding:0; 9 margin: 0; 10 } 11 input,button{ 12 outline: none; 13 border: 0; 14 } 15 .search{ 16 296px; 17 height: 48px; 18 margin-left: 1000px; 19 margin-top: 81px; 20 } 21 .search form{ 22 position: relative; 23 } 24 .search input[type='text']{ 25 223px; 26 height: 48px; 27 font-size: 14px; 28 border: 1px solid #e0e0e0; 29 padding: 0 5px; 30 position: absolute; 31 } 32 .search span{ 33 font-size: 12px; 34 background: #EEEEEE; 35 padding: 0 5px; 36 position: absolute; 37 top:0; 38 right: 0; 39 } 40 .search span.t{ 41 top: 20px; 42 right: 162px; 43 z-index: 2; 44 45 } 46 .search span.s{ 47 top: 20px; 48 right: 83px; 49 z-index: auto; 50 } 51 .search input[type='submit']{ 52 height: 50px; 53 50px; 54 border: 1px solid #e0e0e0; 55 background: #fff; 56 position: absolute; 57 right: 12px; 58 top: 0px; 59 } 60 </style> 61 </head> 62 <body> 63 <div class="search"> 64 <form> 65 <input type="text" name=""><input type="submit" value="按钮"> 66 <span class="t">小米8</span> 67 <span class="s">小米MIX 2s</span> 68 69 </form> 70 </div> 71 72 </body> 73 </html>
五 z-index
<!--1.z-index 值表示谁压着谁，数值大的压盖住数值小的，-->
<!--2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，-->
<!--而浮动元素不能使用z-index-->
<!--3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，-->
<!--那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。-->
实例：z-index优先级判断
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>z-index优先级</title> 6 <style> 7 *{ 8 padding: 0; 9 margin:0; 10 } 11 .box{ 12 500px; 13 height: 500px; 14 background-color: red; 15 16 position: absolute; 17 left: 50%; 18 margin-left: -250px; 19 z-index: 20; 20 } 21 .box1{ 22 300px; 23 height: 300px; 24 background-color: green; 25 position: absolute; 26 left: 50%; 27 margin-left: -150px; 28 z-index: 100; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="box"></div> 34 <div class="box1"></div> 35 36 </body> 37 </html>
实例2 从父现象
<!--从父现象：父亲怂了，儿子再牛逼也没用,儿子的z-index会优先继承父类的z-index-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>z-index从父现象</title> 6 <style> 7 .father1{ 8 position: relative; 9 z-index: 20; 10 } 11 .father2{ 12 position: relative; 13 z-index: 3; 14 } 15 .box{ 16 500px; 17 height: 500px; 18 background-color: red; 19 20 position: absolute; 21 left: 50%; 22 margin-left: -250px; 23 z-index: 20; 24 } 25 .box2{ 26 300px; 27 height: 300px; 28 background-color: green; 29 position: absolute; 30 left: 50%; 31 margin-left: -150px; 32 z-index: 1000000; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="father1"> 38 <div class="box"> 39 40 </div> 41 42 </div> 43 44 <div class="father2"> 45 <div class="box2"> 46 47 </div> 48 </div> 49 50 </body> 51 </html>