css如何固定div在页面顶部或底部-创新互联

小编给大家分享一下css如何固定div在页面顶部或底部，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

下面我们通过具体的代码示例来详细介绍

    
    
    



    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！
    
此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！

固定在顶部
固定在底部

上述代码通过浏览器访问，效果如下图：

通过截图我们看见有两个div块是显示在页面顶部和底部的。我在本地浏览移动滚动条。两个div仍然是固定不动。这里就需要注意到一个重要的css样式属性，position:fixed;也就是绝对定位的样式属性。position属性就是可以让元素放置到一个静态的、相对的、绝对的、或固定的位置中。我们在这里用到的就是fixed样式，也就是固定位置。

所以我们如果想要实现某块div固定在页面某位置（相对于浏览器窗口），不随着滚动条而改变。就要掌握position fixed属性，并且要结合top:0与bottom:0使用。

看完了这篇文章，相信你对css如何固定div在页面顶部或底部有了一定的了解，想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。