css - 左侧边栏不在左侧答案

【问题标题】：css - left sidebar not on left sidecss - 左侧边栏不在左侧
【发布时间】：2014-12-23 11:07:07
【问题描述】：

左侧边栏不会将自己定位在主区域的左侧。它似乎卡在导航链接上。它应该放置在导航链接的“下方”，并且“按钮”应该与侧边栏重叠，就像它们与标题重叠一样。然后我希望文本环绕侧边栏（在我在这里发布的代码中工作）。

我尝试在导航和侧边栏上使用z-index。我也尝试在侧边栏上使用position:relative; 和float:left;，但没有结果。文本也应该环绕侧边栏，如下例所示。我设法使用position:relative; 将侧边栏移到左侧，但文本不会换行。

HTML：

<html lang="sv">
<head>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbanner">
    <h1>TopBanner</h1>
</div>
<div class="header">
    <h1>Header</h1>
    <h2>underrubrik</h2>
</div>
<div class="navigation">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
</div>
<div id="main">
    <div class="leftsidebar">
        <ul>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
        </ul>
    </div>
    <div class="content">
        <p>Content text here</p>
    </div>
</body>
</html>

CSS

body {
    margin: 0;
    background: #fff;
}
/* BANNER */
.topbanner {
    width: 980px;
    height: 80px;
    margin: auto;
    border: 1px solid;
    text-align: center;
    font-family: sans-serif;
}
/* HEADER */
.header {
    width: 980px;
    height: 100px;
    margin: auto;
    border: 1px solid;
    text-align: center;
    font-family: sans-serif;
}
.header h1 {
    margin: 0;
}
.header h2 {
    margin: 0;
}
/* NAVIGATION LINKS */
.navigation {
    width: 980px;
    margin: auto;
}
.navigation a {
    text-decoration: none;
    color: #000;
}
.navigation ul  {
    float: left;
    margin: -10px 0 0 0;
    list-style: none;
}
.navigation ul li {
    display: inline;
    padding: 0 10px 0 10px;
    border: 1px solid;
    background: #fff;
}
.navigation ul li:first-child {
    border-radius: 10px 0 0 10px;
}
.navigation ul li:last-child {
    border-radius: 0 10px 10px 0;
}
/* CONTENT */
#main {
    width: 980px;
    margin: 0 auto;
    border: 1px solid;
}
.leftsidebar {
    width: 20%;
    position: relative;
}
.leftsidebar ul {
    margin: 0;
    border: 1px solid;
    list-style: none;
}
.leftsidebar ul li {
}
.content {      
}
.content p {
    font-family: sans-serif;
}

【问题讨论】：

您似乎缺少一个结束 div 标记？
为了记录，z-index 属性甚至不适用于元素，除非同一元素上还有 position 属性。
您的<h2>underrubrik<h2> 结束标签也是另一个开始标签。改为<h2>underrubrik</h2>
在编辑和修复 HTML 标记后，我们可以看到：jsbin.com/bonide/1/edit?html,css,output
@JoelCox 谢谢，我忘记了<div> 和<h2>underrubrik<h2> 的结束标签。似乎总是忘记那些。

标签： html css sidebar navigationbar

【解决方案1】：

为.navigation ul 样式设置以下内容

margin: -10px 0 -10px 0;
position: relative;
z-index: 2;
list-style: none;

将float: left; 添加到.leftsidebar 以允许文本环绕它，并将padding-top: 20px 30px;（根据您的喜好调整）添加到.leftsidebar ul 以补偿重叠。

http://jsfiddle.net/ocfjsqpp/3/

【讨论】：

【解决方案2】：

尝试将 padding-left:0 放入你的 ul 容器中。

【讨论】：

【解决方案3】：

看看我在这里用你的代码做了什么，你还没有在一开始就结束你的 h2 标签。

访问http://jsfiddle.net/4p6gdka9/enter code here

【讨论】：