HTML+CSS项目实践九——设置网站导航栏悬浮在网页最上面

知识点：CSS 定位属性、z-index属性

实现效果：

导航条叠加在另外一个div上面（导航栏下面有背景图、背景视频等）

导航条一直在浏览器窗口顶部（也就是拖动浏览器窗口的滚动条时，导航栏依然保持位置不变。）

实现原理：

1、多个div叠加：z-index属性控制，该属性使用的时候，必须同时设置position属性，取值可以是相对定位(relative)、 绝对定位(absolute)或者固定定位(fixed)

2、导航条一直出现在浏览器窗口顶端：使用固定定位。它是以l浏览器窗口为基准进行定位，即当拖动浏览器窗口的滚动条时，它依然保持位置不变。

 

制作思路：

1、制作一个div，里面放一张图片，用作背景图（也可以放视频）

2、制作一个div，里面放导航条的内容