相对定位：占位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:200px; height:200px; background-color:red; position:relative; /*相对定位占位置，后面的元素接着排列*/ top:30px; /*在margin-top的位置基础上移动，这样就压盖了下面的图形*/ left:40px; /*在margin-top的位置基础上移动，这样就压盖了下面的图形*/ margin-top: 30px; /*两个div一起向下移动30px*/ } .box2{ width:200px; height:200px; background-color:green; } </style> </head> <body style="height: 2000px;"> <div class="box"></div> <div class="box2"></div> </body> </html>
绝对定位：不占位置，脱标了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; background-color: red; /*单独设置绝对定位 参考点：是以页面的左上角为参考点 特点：脱标 不占位置 */ position: absolute; /*这样一来，两个div都占据页面的顶端*/ top: 30px; } .box2{ width: 200px; height: 300px; background-color: green; /* .box的red颜色在green颜色的上面*/ } </style> </head> <body style="height: 2000px"> <div class="box"></div> <div class="box2"></div> </body> </html>
嵌套盒子中子盒子的移动：
父相子绝：父盒子相对定位，子盒子绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .father{ width: 500px; height: 500px; border: 1px solid yellow; /*父相对定位*/ position: relative; margin-left: 50px; } .box{ width: 200px; height: 200px; background-color: red; /*如果是嵌套盒子 参考点：是以最近父辈盒子的左上角为参考点*/ position: absolute; top: 40px; left: 30px; } .box2{ width: 200px; height: 300px; background-color: green; } </style> </head> <body style="height: 2000px"> <div class="father"> <div class="box"></div> <div class="box2"></div> </div> </body> </html>
固定定位：脱标，不占位置，以浏览器为参考点，固定位置，滑动滚动条不动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .top{ width: 200px; height: 200px; background-color: red; /*固定定位盒子脱标 参考点： 以浏览器的左上角 */ position: fixed; bottom: 10px; right: 30px; text-align: center; line-height: 200px; color: #fff; font-size: 18px; } </style> </head> <body style="height: 2000px;"> <div class="top">回到顶部</div> <!--1.引包 这个包来自网络--> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> console.log($); /* $('.top')引用 top类，click点击事件*/ $('.top').click(function () { // alert(1) $('html,body').animate({ scrollTop:'0' },1000); /*1000表示一秒时间内滚动到页面顶部*/ }); </script> </body> </html>