帮你打开活字格更神奇的功能：二十四，左侧上侧导航栏固定

追风

最近有很多小伙伴在问怎样可以把左侧导航栏以及上方导航栏固定住，提升系统的易用性。为此，我在活字格原有Demo的基础上给大家做了一个例子，方便以后大家再做固定导航栏的时候有个参考的例子。接下来我会在活字格模板中的CRM系统的基础上演示着怎么固定上方导航栏和左侧导航栏。
1.在工程文件中修改CSS样式表。
image.png31269530.png

2.添加如下CSS代码。.top用来控制上方导航栏固定，.left用来控制左侧导航栏固定，.bottom用来控制返回顶部超链接固定在页面底端。
image.png777546081.png

3.重点讲一下css文件的代码
1）position属性是规定元素的定位类型。可能的值absolute，fixed，relative，static，inherit。咱们这里用到的是fixed，即是生成绝对定位的元素，就是说是相对于浏览器窗口来定位，可以用top，bottom，right，left来设置。
2）z-index属性可以理解为三维坐标里面的z坐标，也可以理解成ps里面的层，它的值是绝对数值，哪个的值越大它的层级越高，即是置于最顶层，在顶端三个区域，我将三个都设置成一样大（z-index:100000;），让三个区域处于同一层级。
3）相对位置
上方导航栏用的top类，处于上方------top:0px;
左侧导航栏是left类，处于左侧------left:0px；
返回顶部用的bottom类，处于下方------bottom:0px；
4）宽度
上方导航栏的width设置成auto
5）其他不重要的
box-shadow为阴影，background背景等等其他的属性大家有兴趣可以尝试，可以百度学习下。
4.批量选中上方导航栏修改CSS类名为top。左侧导航栏为left。返回顶部超链接为bottom。
image.png557237243.png