介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title> css固定div示例& lt;/title>
& lt; style>
.demo {
margin-top: 100 px;}
.demo1{:固定;
上图:10 px;左:0 px;底部:0 px;宽度:100%;高度:50 px; background - color: # acffcb; z - index: 999;}
.demo2{:固定;左:0 px;底部:0 px;宽度:100%;高度:50 px;background - color: # 4 cedef;z - index: 999;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt; p>此页面有一个div分别固定在底部和顶部!你可以移动滚动条看看是否固定! & lt;/p>
& lt;/div>
& lt; div类=癲emo1"祝辞固定在顶部& lt;/div>
& lt; div类=癲emo2"祝辞固定在底部& lt;/div>
& lt;/body>
& lt;/html>
小编给大家分享一下css如何固定div在页面顶部或底部,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
下面我们通过具体的代码示例来详细介绍
上述代码通过浏览器访问,效果如下图:
看完了这篇文章,相信你对css如何固定div在页面顶部或底部有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
