什么是CSS中固定定位?

三、固定定位

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

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

Document

*{

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;

}

    网页栏目

    网页栏目

    网页栏目

    网页栏目

    网页栏目

    网页栏目

    网页栏目

    网页栏目

    网页栏目

    网页栏目

    按钮

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

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    推荐阅读更多精彩内容

    • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
      _Yfling阅读 14,680评论 1 92
    • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
      剑残阅读 13,240评论 0 8
    • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
      这就是个帅气的名字阅读 5,442评论 0 0
    • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
      TyroneTang阅读 10,179评论 1 3
    • Game of Thrones S1-1-6 第一季 01凛冬将至 Winter Is Coming 上期回顾 N...
      雪木兰阅读 3,870评论 0 4