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在页面顶部或底部有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！