关于导航在浏览器中的定位以及div居中问题

第一次写html

写了一个header的导航，一开始按照顺序写下了div布局，随着到后面了解的标签以及样式越来越多，考虑着将导航定位下来

采用的方法是在css中在对应的类选择器中加入"position:fixed;"，但是fixed下来以后会带来四个问题。

div构造

<div class="container">
    <div class="container_logo"></div>
    <div class="container_right"><div/>
 </div>

第一、由于我是在原代码上面修改的，我加入到了container里面，而container本身有宽度和居中，本身这一块的颜色利用了浏览器页面本身的白色。

所以在固定以后没有了背景颜色，滑动浏览器的时候看不清楚导航的内容。

第二、固定以后一整条的导航背景颜色不统一，只有div本身有内容或者颜色，但是浏览器宽度一般比这个div的像素宽

第三、固定以后导航不占空间了，所以本来html里面的所有内容都往上移了，这样就导致初始页面会有一部分内容被导航遮盖住

第四、在下面的文档中可能会出现层级比导航高的内容，导致导航不在最上面。

解决方法：

扫描二维码关注公众号，回复： 610661 查看本文章

我在container外面又套了一个div

    width:100%;

    background-color:white;

而container则在这个div中水平居中

    margin:10px auto;

在文档顺序中除了导航的第一个div中加入了margin-top

    margin-top:Xpx;/*X是导航的height*/

对导航设置z轴高度

    z-index:10px;

通过这样的方法解决了以上四个问题。