目前我的代码看起来像这样
body {
padding: 0px;
margin: 0px;
background-color: #ABA49F;
font-family: Verdana, Geneva, sans-serif
}
.header_bar {
width: 100%;
height: 45px;
z-index: 1000 !important;
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506);
height: 22px;
padding: 7px 40px;
background-image: linear-gradient(to top, #212121 9%, #181818 100%);
border-bottom: 2px solid #606060;
}
.header_content {
width: 50%;
margin: left;
}
.header_content li {
list-style: none;
float: left;
font-size: 15px;
}
.title li a {
color: #ffc900 !important;
}
.header_content li a {
text-decoration: none;
color: white;
margin-right: 30px;
}
.header_content a:hover {
color: #ffc900;
}
.sidebar_frame {
z-index: 111;
position:absolute;
top:0;
bottom:0;
left:0;
width:50px;
background:#000;
}

<div class="sidebar_frame">aaaa</div>
<div class="header_bar">
<div class="header_content">
<div class="title">
<li><a href=""><b>Farm</b></a>
</li>
</div>
<li><a href="">New farm</a>
</li>
<li><a href="">aaaa</a>
</li>
<li><a href="">aaaa</a>
</li>
</div>
</div>
&#13;
我试图制作一个100%高度的侧边栏。我不知道为什么没有z-index的侧边栏位于菜单的顶部,为什么页面水平轴上有一些随机可滚动空间?
移除侧边栏会清除可滚动空间。
答案 0 :(得分:2)
侧边栏与菜单重叠,因为position: absolute
元素are removed from the normal flow of the document。这意味着标题自定位而不考虑侧边栏。
修复重叠:
将left-margin
提供给侧边栏宽度相同的.header_bar
。这可以容纳侧杆的空间。
修复滚动问题:
从.header_bar
移除左右填充,并将其作为左边距填充到.title
删除.header_bar
一些小改进:
删除<li>
并将样式直接应用于元素
删除或增加.header_content
删除不存在的margin: left
将.title a
放在CSS中的另一个链接属性之后。当属性值冲突时,声明的最后一个属性是胜利者。 This eliminates the need for !important
.
删除所有z-index属性;他们不再需要了。
把所有这些放在一起,你得到这个例子:
body {
padding: 0px;
margin: 0px;
background-color: #ABA49F;
font-family: Verdana, Geneva, sans-serif
}
.header_bar {
height: 45px;
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506);
height: 22px;
padding: 7px 0;
background-image: linear-gradient(to top, #212121 9%, #181818 100%);
border-bottom: 2px solid #606060;
margin-left: 50px;
}
.header_content .title {
list-style: none;
float: left;
font-size: 15px;
padding-left: 40px;
}
.header_content a {
text-decoration: none;
color: white;
margin-right: 30px;
float: left;
}
.title a {
color: #ffc900;
}
.header_content a:hover {
color: #ffc900;
}
.sidebar_frame {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50px;
background: #000;
}
&#13;
<div class="sidebar_frame">aaaa</div>
<div class="header_bar">
<div class="header_content">
<div class="title">
<a href=""><b>Farm</b></a>
</div>
<a href="">New farm</a>
<a href="">aaaa</a>
<a href="">aaaa</a>
</div>
</div>
&#13;
答案 1 :(得分:1)
以下是您问题的解决方案:jsFiddle。您需要删除分配给.header_bar
的水平填充,并将z-index
的{{1}}更改为.sidebar_frame
。