relative：相对定位。
1. 不论其父元素和相邻元素的position是什么，均相对于自身原来的位置来偏移。
2. 不会脱离文档流，其原来的位置依然保留着，不会被文档中其他的元素占用。
3. 原来是行内元素，设置相对定位后，依然是行内元素。
4. 设置了相对定位的块级元素，如果没有设置宽度，其宽度依然是拉伸至父元素宽度的100%。
下面是demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>相对定位</title> </head> <style> .A { background: yellow; height: 100PX; width: 100PX; } .B { background: red; height: 100PX; width: 100PX; position: relative; top: 20PX; margin-top: 20PX; margin-bottom: 20px; /* 相当于以前的位置先向20px;在top原来的位置20px; */ /* bottom: ; */ } .C { background:green; height: 100PX; width: 100PX; } span{ position: relative; top: 50px; } input{ width: 20px; height: 30px; } span{ position: relative; width: 100px; height: 100px; background: red; /* 行内元素不会影响宽高 */ } </style> <body> <!-- 相对定位就是相当于自己以前在标准流中的位置来移动 不会脱离自己的标准流，自己的位置不变 position:relative; top:20px; left:20px; 相对定位应用场景 用于对元素进行微调 配合后面的学习的绝对定位来使用 --> <div class="A"></div> <div class="B"></div> <div class="C"></div> <input type="text" class="D"> <span>输入</span> </body> </html>
李南江老师视频笔记
absolute：绝对定位。
1. 相对于最近的一个position不为static的父元素来定位，如果没有，则相对于html来定位，注意：此处网上很多资料说是相对于body来定位，下文会进行验证。
2. 设置了绝对定位的行内元素，会转化为块级元素，可以设置宽高。
3. 设置了绝对定位的块级元素，如果没有设置固定宽度，则其宽度不会自动拉伸至父元素的100%，而是由内容和内边距的宽度来决定的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>绝对定位</title> </head> <style> div { height: 100px; width: 100px; } .A { background: red; } .B { background: green; position: absolute; /* right: 0; */ /* /* top: 0; */ bottom: 0; /* 脱离流元素，相对于body的位置 */ } .C { background: blue; } span { position: absolute; width: 100px; height: 100px; background: yellow; /* 行内元素不会影响宽高 */ } </style> <body> <div class="A"></div> <div class="B"></div> <div class="C"></div> <!-- <span>我是span</span> --> </body> </html>
子绝父相
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> /* 如果用相对定位则不居中，如果使用绝对定位是按当前屏幕决定位置，会随屏大小移动 */ *{margin: 0; padding: 0; } ul{ list-style: none; height: 50px; width: 700px; margin: 0 auto; margin-top: 100px; } ul li{ float: left; text-align: center; width: 100px; line-height: 50px; background: RGB(184,184,184); } ul li:nth-of-type(4){ position: relative; background: #aad; } ul li img{ position: absolute; top: -13px; left: 42px; } </style> <body> <ul> <li>京东时尚</li> <li>美妆馆</li> <li>超市</li> <li>生鲜 <img src="./images/FAQa.gif" alt=""> </li> <li>闪购</li> <li>拍卖</li> <li>金融</li> </ul> </body> </html>