关于position:fixed

130 阅读1分钟

一,定义:

positon:fixed是相对什么进行定位的。

  • 相对于视口进行定位,同样也遵循最近fixed定位的父级元素为标准

二,使用场景

  • 视窗滚动条:如果文档或网页的内容高度或宽度超出了浏览器窗口,就会出现滚动条
    • 出现在浏览器窗口的边缘
    • 允许用户在整个文档或网页中滚动
    • 由浏览器控制
  • 元素滚动条:当元素的内容超出了元素本身的可用高度或宽度时,就会出现元素滚动条
    • 出现在元素内部
    • 允许用户在整个元素中滚动
    • 由元素控制
  • fixed的top不为0,为什么不会出现横向视窗滚动条?
    <html> 
        <body> 
            <div style="position: fixed; top: 50px;"> 
                <!-- 元素内容 --> 
                </div> 
        </body> 
    </html>
    
    • fixed 定位它不受文档滚动条的影响。
    • 浏览器窗口的宽度没有被 div 元素的内容超出