|
以浏览器作为参考进行偏移，且滚动条对固定定位无效 语法：position:fixed
案例代码运行： - <head>
- <meta charset="utf-8" />
- <title></title>
- <style type="text/css">
- .box{
- width:300px;
- height:200px;
- background:#abcdef;
- position:fixed;/* 设置固定定位，相对于浏览器窗口 */
- left:50%;
- top:50%;
- margin-left:-150px;
- margin-top:-100px;
- }
- .text{
- width:20px;
- }
- </style>
- </head>
- <body>
- <div class="text">
- 日照香炉生紫烟，遥看瀑布挂前川。
- 飞流直下三千尺，疑是银河落九天。
- </div>
- <div class="box"></div>
- </body>
总结： 1.会脱离文档流，不占据标准流的空间 2.不继承父元素的宽高，需要给自身定义宽高 3.margin:auto对固定定位的元素不起作用 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效） 使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告。 | 
