固定定位【"position:fixed"】
定义：
固定定位是元素是相对于窗口（视口）定位的，也就是说即使滚动页面他也始终位于同一个位置
通俗来讲就是固定的元素不会随着滚动条的拖动而改变位置（在视野中，固定定位的元素位置不会改变的）
应用场景：
最常见的就是吸顶盒、底部通栏
其次还有：全屏黑色半透明遮罩弹出层、弹出注册和登录框、楼梯式导航（美团）、浏览器右侧菜单、左上固定自适应后台管理系统布局
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{height: 1500px;} header { width: 100%; background-color: #FFC0CB; position: fixed; top: 0; } </style> </head> <body> <header> <h1>Tab</h1> </header> <br><br><br><br><br><br><br> <div> 测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！ </div> </body> </html>
绝对定位【position:absolute】
定义：
相对于最近的祖先元素进行定位。
如果绝对定位的元素没有祖先，他将使用文档的主体也就是body,并随着页面滚动一起滚动
注意：父级有定位则看父级，父级没有定位继续向上找父级，实在找不到的话，就浏览器对齐
无父盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*消除浏览器内外边距*/ * { margin: 0; padding: 0; } .alone { width: 300px; height: 300px; background-color: blueviolet; /* 绝对定位：距离顶部100px，距离左边100px */ position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div class="alone"></div> </body> </html>
有父级盒子（父级无相对）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father{ width:500px; height: 500px; margin-top: 150px; margin-left: 150px; background-color: beige; } .alone { width: 300px; height: 300px; background-color: blueviolet; /* 绝对定位：距离顶部0px，距离右边0px */ position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div class="father"> <div class="alone"></div> </div> </body> </html>
有父盒子（父级有相对）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father{ position: relative; width:500px; height: 500px; margin-top: 150px; margin-left: 150px; background-color: beige; } .alone { width: 300px; height: 300px; background-color: blueviolet; /* 绝对定位：距离顶部0px，距离右边0px */ position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div class="father"> <div class="alone"></div> </div> </body> </html>
注意：绝对定位式脱离文档流，直接在标准的文档流中删除，元素原来的位置会被占用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 50px; width: 50px; } section{ position: relative; background-color: aqua; } .d1 { background-color: red; } .d2 { background-color: green; position: absolute; top: 20px; left: 30px; } .d3 { background-color: blue; } </style> </head> <body> <section> <div class="d1">div1</div> <div class="d2">div2</div> <div class="d3">div3</div> </section> </body> </html>
总结：
- 绝对定位元素脱离正常流(文档流)，所以元素原来的位置会被其他元素占用。
- 因为绝对定位元素脱离了正常流，和相对元素一样也会有覆盖其他元素的情况。
- 绝对定位元素是相对于祖先元素，和相对定位不同，相对定位是相对于元素自己原来的位置。
- 绝对定位元素的祖先元素是设置的position: static，该祖先元素并不作为参考物。
- 绝对定位元素的祖先元素有多个都设置了position: absolute或position: relative ,那么是以最 近的一个祖先元素作为参考物，即相对于最近的那一个祖先元素进行移动定位。
