第一次写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里面的所有内容都往上移了,这样就导致初始页面会有一部分内容被导航遮盖住
第四、在下面的文档中可能会出现层级比导航高的内容,导致导航不在最上面。
解决方法:
我在container外面又套了一个div
width:100%;
background-color:white;
而container则在这个div中水平居中
margin:10px auto;
在文档顺序中除了导航的第一个div中加入了margin-top
margin-top:Xpx;/*X是导航的height*/
对导航设置z轴高度
z-index:10px;
通过这样的方法解决了以上四个问题。