《小白H5成长之路23》网页漂浮层与浮动导航是怎么实现的

"小白，你最近看CSS的时候碰到position属性了么？"

“碰到了，通过position可以改变容器的定位，我记得官方描述是这样的：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”

“恩，不错，今天咱说一下position里面的fixed类型吧，这个属性值是让容器基于浏览器窗口的绝对定位，在我们平时的制作中经常会碰到。”

老朱接着说：“给一个容器设定position为fixed以后，可以通过left、right、bottom、top进行四个方向的距离定位。现在我们在页面中写一个fixed容器，看一下代码片段。”

“你看，这里我在body里面加了一个标识为foot的div，然后他的css里面把position设置成了fixed，并且bottom（距离底部）为0，这里的bottom是基于浏览器窗口的距离进行计算的，foot的宽和高也进行了设定。现在我们看一下效果！”

“你可以看到，拖动滚动条往下滚动网页的时候，foot的位置并不会随着滚动条的滚动发生改变，它就像是漂浮在那里一样。这里的foot是一个div容器，所以它的内部我们还可以放任何你希望布局的内容，比如放一个图片，或者其他的容器。”

“这里插入的图片要想跟foot容器宽度一致，根据我们之前说过的对图片css的操作，把图片的宽度（width）设定为100%，图片就会自动与父容器宽度一致了。”

小白突然想到了很多手机HTML5页面下方都有导航条，问道：“很多手机的HTML5页面里面下方的导航条不会随着页面的滚动而滚动，这种导航条是不是也通过fixed来设定的。”

“是的，跟这里的foot一样，我们只需要把导航条的父容器设定为fixed就可以了。有个需要注意的地方是导航条会根据手机屏幕的分辨率自动占用屏幕宽度，所以我们在给foot设定css样式的时候就不能设定宽度了。”

小白问道：“那应该怎么设定呢？”

老朱说：“你忘了我们刚说了fiex可以通过top、right、bottom、left设定四个方向的距离么？如果要让一个fixed容器左右靠边，我们只需要left为0，right为0，它就会自动匹配窗口的宽度。现在我们把之前的foot容器改一下。”

“通过设定bottom、left、right可以让foot靠近底部并且保持与窗口宽度一致。然后我们在foot里面放了一个ul-li容器，让li容器向左浮动并且宽度为父容器的25%，布局就会变成这样。”

“网页上的底部导航通常都会放入透明的png图片，现在我们插入png图，再进行一下css的调整。”

“网页底部导航条，上面还会牵扯到鼠标事件，焦点样式变化，这些知识我们随后也会一一展开讨论，今天先这样吧！你先练习练习今天说的这些内容，然后试着做一个居中漂浮的层，看看能不能做出来！”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！