小编给大家分享一下css如何固定div在页面顶部或底部，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
下面我们通过具体的代码示例来详细介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css固定div示例</title>
<style>
.demo{
margin-top: 100px;}
.demo1{position: fixed;
top: 10px; left:0px; bottom:0px; width:100%; height: 50px;background-color: #acffcb;z-index:999;}
.demo2{ position:fixed; left:0px; bottom:0px; width:100%; height: 50px; background-color: #4cedef; z-index:999;}
</style>
</head>
<body>
<div class="demo">
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
<p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
</div>
<div class="demo1">固定在顶部</div>
<div class="demo2">固定在底部</div>
</body>
</html>上述代码通过浏览器访问，效果如下图：
通过截图我们看见有两个div块是显示在页面顶部和底部的。我在本地浏览移动滚动条。两个div仍然是固定不动。这里就需要注意到一个重要的css样式属性，position:fixed;也就是绝对定位的样式属性。position属性就是可以让元素放置到一个静态的、相对的、绝对的、或固定的位置中。我们在这里用到的就是fixed样式，也就是固定位置。
所以我们如果想要实现某块div固定在页面某位置（相对于浏览器窗口），不随着滚动条而改变。就要掌握position fixed属性，并且要结合top:0与bottom:0使用。
看完了这篇文章，相信你对css如何固定div在页面顶部或底部有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
