CSS定位中“父相子绝”
一、定位的介绍
定位有三种：相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed)
二、三种定位的用法，特点和实例
2.1、相对定位 特性：不脱标、形影分离、老家留坑
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 div{ 13 width: 200px; 14 height: 200px; 15 16 } 17 .box1{ 18 background-color: red; 19 } 20 .box2{ 21 background-color: green; 22 position: relative; 23 /*top: 50px;*/ 24 left: 300px; 25 } 26 .box3{ 27 background-color: blue; 28 } 29 30 31 </style> 32 </head> 33 <body> 34 35 <!-- 相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑 36 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果--> 37 38 <div class="box1"></div> 39 <div class="box2"></div> 40 <div class="box3"></div> 41 42 43 </body> 44 </html> 45 46 相对定位的特性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>超链接美化</title> 6 <style type="text/css"> 7 /*清除默认样式*/ 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 ul{ 13 list-style: none; 14 } 15 .nav{ 16 width: 960px; 17 /*height: 40px;*/ 18 overflow: hidden; 19 margin: 100px auto ; 20 background-color: purple; 21 /*设置圆角*/ 22 border-radius: 10px; 23 } 24 .nav ul li{ 25 float: left; 26 width: 160px; 27 height: 40px; 28 line-height: 40px; 29 text-align: center; 30 } 31 .nav ul li.xiaoming{ 32 position: relative; 33 top: 40px; 34 left: 30px; 35 } 36 .nav ul li a{ 37 display: block; 38 width: 160px; 39 height: 40px; 40 color: white; 41 font-size: 20px; 42 text-decoration: none; 43 font-family: 'Hanzipen SC'; 44 } 45 /*a标签除外，不继承父元素的color*/ 46 47 48 .nav ul li a:hover{ 49 background-color: red; 50 font-size: 22px; 51 } 52 </style> 53 </head> 54 <body> 55 56 <div class="nav"> 57 <ul> 58 <li> 59 <a href="">网站导航1</a> 60 </li> 61 <li class="xiaoming"> 62 <a href="">网站导航2</a> 63 </li> 64 <li> 65 <a href="">网站导航3</a> 66 </li> 67 <li> 68 <a href="">网站导航4</a> 69 </li> 70 <li> 71 <a href="">网站导航5</a> 72 </li> 73 <li> 74 <a href="">网站导航6</a> 75 </li> 76 </ul> 77 </div> 78 </body> 79 </html> 80 81 82 83 <!-- 因为相对定位有坑，占着茅房不拉屎，所以我们一般不要使用相对定位来做压盖效果。它在页面中，效果作用极小，就两个作用： 84 1.微调元素位置 85 2.做绝对定位的参考（父相子绝） 讲绝对定位会讲 86 87 --> 88 89 90 91 <!DOCTYPE html> 92 <html lang="en"> 93 <head> 94 <meta charset="UTF-8"> 95 <title>Document</title> 96 <style type="text/css"> 97 *{ 98 padding: 0; 99 margin: 0; 100 } 101 div{ 102 margin: 100px; 103 } 104 .user{ 105 font-size: 25px; 106 } 107 .btn{ 108 position: relative; 109 top: 3px; 110 left: -5px; 111 } 112 113 </style> 114 </head> 115 <body> 116 <!-- 微调我们元素位置--> 117 118 <div> 119 120 <input type="text" name="username" class="user"> 121 <input type="button" name="" value="点我" class="btn"> 122 </div> 123 124 </body> 125 </html> 126 127 相对定位的用途
2.2、绝对定位 特性：脱标、做遮盖效果，提升了层级、设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 div{ 13 width: 200px; 14 height: 200px; 15 } 16 .box1{ 17 background-color: red; 18 19 /*绝对的定位： 1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。*/ 20 position: absolute; 21 } 22 .box2{ 23 background-color: green; 24 25 } 26 .box3{ 27 background-color: blue; 28 } 29 span{ 30 width: 100px; 31 height: 100px; 32 background-color: pink; 33 position: absolute; 34 } 35 36 37 </style> 38 </head> 39 <body> 40 41 42 43 <div class="box1"></div> 44 <div class="box2"></div> 45 <div class="box3"></div> 46 <span>文字</span> 47 48 </body> 49 </html> 50 51 绝对定位的特性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 width: 100%; 9 height: 2000px; 10 border: 10px solid green; 11 } 12 13 .box{ 14 width: 200px; 15 height: 200px; 16 background-color: red; 17 /*绝对定位参考点： 18 1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 19 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。 20 */ 21 position: absolute; 22 top: 100px; 23 /*bottom: 100px;*/ 24 left: 18px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="box"> 30 31 </div> 32 33 34 35 </body> 36 </html> 37 38 绝对定位参考点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box{ 12 width: 300px; 13 height: 300px; 14 border: 5px solid red; 15 margin: 100px; 16 /*父盒子设置相对定位*/ 17 position: relative; 18 padding: 50px; 19 } 20 .box2{ 21 width: 300px; 22 height: 300px; 23 background-color: green; 24 position: relative; 25 26 } 27 28 .box p{ 29 width: 100px; 30 height: 100px; 31 background-color: pink; 32 /*子元素设置了绝对定位*/ 33 position: absolute; 34 top: 0; 35 left: 0; 36 } 37 38 /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点 39 这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点 40 */ 41 42 </style> 43 </head> 44 <body> 45 <div class="box"> 46 47 <div class="box2"> 48 <p></p> 49 </div> 50 </div> 51 52 </body> 53 </html> 54 55 绝对定位以盒子作为参考点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box{ 12 width: 300px; 13 height: 300px; 14 border: 5px solid red; 15 margin: 100px; 16 /*父盒子设置相对定位*/ 17 position: absolute; 18 padding: 50px; 19 } 20 21 22 .box p{ 23 width: 100px; 24 height: 100px; 25 background-color: pink; 26 /*子元素设置了绝对定位*/ 27 position: absolute; 28 top: 10px; 29 left: 20px; 30 } 31 32 33 </style> 34 </head> 35 <body> 36 37 <!-- 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点 。 38 39 注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。 40 41 --> 42 <div class="box"> 43 44 <p></p> 45 46 </div> 47 48 </body> 49 </html> 50 51 绝对定位以父辈盒子做参考点2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .father{ 12 width: 300px; 13 height: 300px; 14 margin: 100px; 15 border: 10px solid red; 16 position: relative; 17 padding: 50px; 18 } 19 .father p{ 20 width: 100px; 21 height: 100px; 22 background-color: yellow; 23 position: absolute; 24 top: 10px; 25 left: 40px; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="father"> 31 <p></p> 32 </div> 33 34 </body> 35 </html> 36 37 绝对定位的盒子无视父辈的padding
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box{ 12 width: 100%; 13 height: 69px; 14 background: #000; 15 } 16 .box .c{ 17 width: 960px; 18 height: 69px; 19 background-color: pink; 20 /*margin: 0 auto;*/ 21 position: relative; 22 left: 50%; 23 margin-left: -480px; 24 25 /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/ 26 } 27 28 29 </style> 30 </head> 31 <body> 32 <div class="box"> 33 <div class="c"></div> 34 </div> 35 36 </body> 37 </html> 38 39 绝对定位盒子居中
2.3、固定定位 特性：脱标、遮盖，提成层级、固定位置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 p{ 13 width: 100px; 14 height: 100px; 15 background-color: red; 16 /*固定定位：固定当前的元素不会随着页面滚动而滚动， 17 特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动 18 19 参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点 20 如果用bottom描述，那么是以浏览器的左下角为参考点 21 22 作用： 1.返回顶部栏 2.固定导航栏 3.小广告 23 24 */ 25 position: fixed; 26 bottom: 30px; 27 right: 40px; 28 } 29 </style> 30 </head> 31 <body> 32 33 <div> 34 <p></p> 35 <img src="./bojie.jpg" alt=""> 36 <img src="./bojie.jpg" alt=""> 37 <img src="./bojie.jpg" alt=""> 38 <img src="./bojie.jpg" alt=""> 39 <img src="./bojie.jpg" alt=""> 40 <img src="./bojie.jpg" alt=""> 41 42 </div> 43 </body> 44 </html> 45 46 固定定位特性和应用场景
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定导航栏</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 list-style: none; 13 } 14 a{ 15 text-decoration: none; 16 } 17 body{ 18 /*给body设置导航栏的高度，来显示下方图片的整个内容*/ 19 padding-top: 49px; 20 } 21 .wrap{ 22 width: 100%; 23 height: 49px; 24 background-color: #000; 25 /*设置固定定位之后，一定一定要加top属性和left属性*/ 26 position: fixed; 27 top: 0; 28 left: 0; 29 30 31 } 32 .wrap .nav{ 33 width: 960px; 34 height: 49px; 35 margin: 0 auto; 36 37 } 38 .wrap .nav ul li{ 39 float: left; 40 width: 160px; 41 height: 49px; 42 43 text-align: center; 44 } 45 .wrap .nav ul li a{ 46 width: 160px; 47 height: 49px; 48 display: block; 49 color: #fff; 50 font: 20px/49px "Hanzipen SC"; 51 background-color: purple; 52 } 53 .wrap .nav ul li a:hover{ 54 background-color: red; 55 font-size: 22px; 56 } 57 58 59 60 </style> 61 </head> 62 <body> 63 <div class="wrap"> 64 <div class="nav"> 65 <ul> 66 <li> 67 <a href="#">网页开发</a> 68 </li> 69 <li> 70 <a href="#">网页开发</a> 71 </li> 72 <li> 73 <a href="#">网页开发</a> 74 </li> 75 <li> 76 <a href="#">网页开发</a> 77 </li> 78 <li> 79 <a href="#">网页开发</a> 80 </li> 81 <li> 82 <a href="#">网页开发</a> 83 </li> 84 </ul> 85 </div> 86 </div> 87 <img src="./bojie.jpg" alt=""> 88 <img src="./bojie.jpg" alt=""> 89 <img src="./bojie.jpg" alt=""> 90 <img src="./bojie.jpg" alt=""> 91 <img src="./bojie.jpg" alt=""> 92 <img src="./bojie.jpg" alt=""> 93 <img src="./bojie.jpg" alt=""> 94 <img src="./bojie.jpg" alt=""> 95 <img src="./bojie.jpg" alt=""> 96 <img src="./bojie.jpg" alt=""> 97 <img src="./bojie.jpg" alt=""> 98 <img src="./bojie.jpg" alt=""> 99 100 101 </body> 102 </html> 103 104 固定定位_固定导航栏
三、父相子绝
当父盒子设定为相对定位，子盒子绝对定位的参考点是父盒子的左上角。如果父盒子设定为绝对定位或者固定定位，子盒子同样是以父盒子的左上角做参考点，但是那样，父盒子就脱离标准流，没什么意义。所以一般情况下，都是要遵从“父相子绝”的原则。附一个父相子绝的案例，如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box{ 12 width: 300px; 13 height: 300px; 14 border: 5px solid red; 15 margin: 100px; 16 /*父盒子设置相对定位*/ 17 position: relative; 18 padding: 50px; 19 } 20 .box2{ 21 width: 300px; 22 height: 300px; 23 background-color: green; 24 position: relative; 25 26 } 27 28 .box p{ 29 width: 100px; 30 height: 100px; 31 background-color: pink; 32 /*子元素设置了绝对定位*/ 33 position: absolute; 34 top: 0; 35 left: 0; 36 } 37 38 /*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点 39 这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点 40 */ 41 42 </style> 43 </head> 44 <body> 45 <div class="box"> 46 47 <div class="box2"> 48 <p></p> 49 </div> 50 </div> 51 52 </body> 53 </html>
