相对定位:占位置
<!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>