关于position:fixed

最新推荐文章于 2024-01-02 16:35:09 发布

原创最新推荐文章于 2024-01-02 16:35:09 发布 · 815 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了 CSS 中 position:fixed 的使用方法及其相对于浏览器窗口的定位特性，并通过实例对比了它与其他定位方式的不同。

position:fixed这个样式我们很经常用。大部分情况我们都是用来写浮窗。

经常的写法都是把它独立的放在最后。例如：

<body>
 <div class="content"> 
 内容
 </div>
 <div class="fix-box">浮窗</div>
</body>
.content{height:2000px;}
.fix-box{position:fixed;right:0;top:0;}

--------------------------------------------------------------

但如果是这样：

<body>
 <div class="content">
 内容
 <div class="area">
       绝对定位      
       <div class="fix-box">浮窗</div>
    </div>
 </div>
</body>
.content{height:2000px;position:relative;}
.area{position:absolute;top:100px;left:100px;}
.fix-box{position:fixed;right:0;top:0;}