Question

我正在尝试修复我的网站顶部的标题，但我正在使用position：fixed;标题向左移动，页面内容的其余部分即将出现。我已经尝试过z-index和padding仍然是左边的标题，任何人都可以帮助找到解决方案。

由于

<body>
<div class="header_area ">
<div class=" header ">
<div class="logo  floatleft">
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/>
</div>
<div class="mainmenu floatright ">
<nav class="main-navigation pull-right hidden-xs hidden-sm">
(now some list there)

.header_area{}
.header
{
    position: fixed;
    z-index:1000;
    padding: 10px 0;
    margin: 0 auto;
    transition: all 1.3s ease 0s;
    -moz-transition: all 1.3s ease 0s;
    -webkit-transition: all 1.3s ease 0s;
    -o-transition: all 1.3s ease 0s;
    -ms-transition: all 1.3s ease 0s;

}
body{
    padding: 20px 10px;
    font-family: sans-serif, open-sans;
    font-size:14px;line-height:20px;color:#414141;
}
nav.main-navigation {
    position: relative;
    z-index: 9999;
    font-family: bebasregular;
}

Answer 1

尝试添加：

position: fixed;
top:0; left:0; right:0;

Answer 2

试试这个

    <div class="header_area ">
<div class=" header ">
<div class="logo  floatleft">
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/>
</div>
<div class="mainmenu floatright ">
<nav class="main-navigation pull-right hidden-xs hidden-sm">
</nav>
  </div>
  </div>

＆安培;

    .header_area{
height:400px;
}
.header
{
    position: fixed;
    z-index:1000;
    padding: 10px 0;
  background-color:red;
  top:0px;
  left:0px;
  width:100%;
    margin: 0 auto;
    transition: all 1.3s ease 0s;
    -moz-transition: all 1.3s ease 0s;
    -webkit-transition: all 1.3s ease 0s;
    -o-transition: all 1.3s ease 0s;
    -ms-transition: all 1.3s ease 0s;

}
body{
    padding: 20px 10px;
    font-family: sans-serif, open-sans;
    font-size:14px;line-height:20px;color:#414141;
}
nav.main-navigation {
    position: relative;
    z-index: 9999;
    font-family: bebasregular;
}

使用CSS修复标头

2 个答案: