本篇文章就给大家详细介绍如何用css样式让div固定在最上面，或者设置div在底部固定。
下面我们通过具体的代码示例来详细介绍
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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>
<divclass="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>
<divclass="demo1">固定在顶部</div>
<divclass="demo2">固定在底部</div>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56916.shtml
