HTML5如何才能让导航栏固定顶部不动，且！且！且！不遮挡住下面的DIV？？？
HTML5让导航栏固定顶部不动且不遮挡住下面的DIV方法如下：
1，首先在html中，添加良好的导航内容。
2，后者是网页的具体内容，这里的代码比较简单。
3，在样式中，首先在菜单中定义一些样式。
4，此时，在运行页面时，滚动条滚动后导航将消失。
5，为了将导航栏固定在顶部，可以添加样式位置：固定；最高：0;在导航容器中，键是第一个样式，因此其位置是固定的。
6，此时，页面开始运行，页面向上滚动，并且导航始终在顶部。
1、首先在我们的html里，添加好导航内容。
2、后面的就是网页的具体内容了，这里的代码简单一些。
3、样式里，我们先定义一些菜单里的样式。
4、这时运行页面时，在滚动条滚动下去后，导航是会消失不见的。
5、为了让导航栏固定在顶部，我们可以在导航容器里添加样式position: fixed;top: 0; 关键是第一个样式，让它的位置固定起来。
6、这时运行页面，页面滚动起来，导航也始终在顶部的。
1、新建一个文件夹，用来存放网页文件和图片，快捷键ctrl+shift+n。
2、进入新建文件夹里面，右键新建文本文档。
3、进入新建的文本文档，复制下方代码，点击快捷键ctrl+s保存后退出。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin: 0 auto;color:#F6F6F6;}
/*注：t1的宽度是100%跟其他div的宽度不同，如果分辨率高于1100宽度的时候，t1会突出来，这是你原先代码的。*/
/*position:fixed;这个fixed属性为块状，他跟absolute一样，不会独占一行。z-index: 2;属性就是让他显示在其他div的上层*/
.t1{position:fixed; width:100%; height:50px; background: #000000;z-index: 2;}
.t2{width:1100px;height:100px;background:#2266FF;}
.t3{width:1100px;height:100px;background:#5577FF;}
.t4{width:1100px;height:100px;background:#3344FF;}
.t5{width:1100px;height:100px;background:#5577FF;}
.t6{width:1100px;height:100px;background:#3344FF;}
/*t01的position: relative;这个是独占一行的属性，在这里相当于占位符的作用。height: 50px;这里的50像素高度要等于t1的高度。background:none;背景设置成空白或者透明，这里设不设置都没关系，因为他没有加z-index这个属性，他默认的属性为0，即显示在t1图层的下面*/
.t01{position: relative;height: 50px;background:none;}
</style>
</head>
<body>
<div class="t1">T1这是希望固定不动的DIV</div>
<div class="t01"></div>
<div class="t2">T2</div>
<div class="t3">T3</div>
<div class="t4">T4</div>
<div class="t5">T5</div>
<div class="t6">T6</div>
</body>
</html>
4、重命名新建文本文档为index.html，原先的.txt的后缀同时去掉后保存，提示确实要更改后按“是”即可。
5、点击index.html，右键浏览器打开预览效果，打开后即可得到如下效果。
按照说的方法解决也不对啊...按您说的方法改后，不仅没有解决反而还加大了和顶部的距离了
见录制的GIF
首先是修改后在IE测试，后面是在chrome里测试，鉴于结果，就没去火狐等其他测
你这是给t2加了top值吧，t2的top:0,要这样的， position：fixed; 兼容ie8+
|
广告 您可能关注的内容 |
