您的位置：首页 > Web前端 > CSS

什么是CSS中固定定位？

2017-03-22 12:33 183 查看

三、固定定位

固定定位（fixed），就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。固定定位和绝对定位有相似之处，IE6以上版本才支持这项属性，以我的理解，固定定位总是以当前的页面为基准进行偏移，和背景图片固定，内容滚动的效果一样。使用固定定位会脱离标准流！

通过在顶部导航条使用固定定位来认识固定定位

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

body{

/*为什么要写这个？*/

/*不希望我们的页面被nav挡住*/

padding-top: 60px;

/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/

_padding-top:0;

}

.nav{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 60px;

background-color: #333;

z-index: 99999999;

}

.inner_c{

width: 1000px;

height: 60px;

margin: 0 auto;

}

.inner_c ul{

list-style: none;

}

.inner_c ul li{

float: left;

width: 100px;

height: 60px;

text-align: center;

line-height: 60px;

}

.inner_c ul li a{

display: block;

width: 100px;

height: 60px;

color:white;

text-decoration: none;

}

.inner_c ul li a:hover{

background-color: gold;

}

p{

font-size: 30px;

}

.btn{

display: block;

width: 120px;

height: 30px;

background-color: orange;

position: relative;

top: 2px;

left: 1px;

}

</style>

</head>

<body>

<div class="nav">

<div class="inner_c">

<ul>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

<li><a href="#">网页栏目</a></li>

</ul>

</div>

</div>

<img src="images/2.jpg" alt="" />

<p>

<a href="" class="btn">按钮</a>

</p>

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

<img src="images/2.jpg" alt="" />

</body>

</html>

运行结果如下，这里做了简单的注释

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS 固定定位 fixed

相关文章推荐

新的分享

章节导航