CSS基础之固定定位

╰半橙微兮° 2022-07-13 13:21 334阅读 0赞

固定定位
1、什么是固定定位
将元素固定在网页的可视化的某个位置处，不会随着滚动条而发生位置的改变
2、属性 & 值
position:fixed;
通过偏移属性实现位置的调整
top/right/bottom/left
3、注意
1、固定定位元素会脱离文档流
2、固定定位元素会变成块级元素

3、固定定位元素永远都是相对于body实现位置的初始化

效果如下图所示：

Center 

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Insert your title</title>
  5.         <meta charset="utf-8">
  6.         <style>
  7.             #menu{
  8.                 width:30px;
  9.                 height:150px;
  10.                 background-color:red;
  11.                 position:fixed;
  12.                 right:0px;
  13.                 top:300px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="menu"></div>
  19.         <div style="height:5000px;"></div>
  20.     </body>
  21. </html>

发表评论

表情：
评论列表 （有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读