标题DIV走在侧边栏Div

正如标题所说，我已经开始制作我现在完成的侧边栏，但是当我添加我的标题时，无论我给出的是哪个正面，标题div是无论是在后面还是坐在侧边栏上div。标题DIV走在侧边栏Div

问题截图： Problem screenshot

在此的任何输入被高度赞赏。

body{ 
 
    background-color: #f1f6f6; 
 
    font-family: sans-serif; 
 
} 
 

 
#sidebar{ 
 
    background-color: #212528; 
 
    position: fixed; 
 
    width: 20%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
} 
 

 
#nav{ 
 
    color: #888888; 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 

 
#nav ul { 
 
    padding-left: 0; 
 
} 
 

 
#nav li{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 1em 0 1em 0; 
 
    text-align: center; 
 
    max-width: 100%; 
 
} 
 

 
#nav li:hover { 
 
    background:#333; 
 
} 
 

 
#nav li a { 
 
    display: block; 
 
    padding: 0.5em 0; 
 
} 
 

 
.link{ 
 
    text-align: right; 
 
    margin-right: 20%; 
 
} 
 

 
#searchbar{ 
 
    width: 70%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 1em 1em 0.5em 1em; 
 
    text-align: right; 
 
} 
 

 
#searchbar input{ 
 
    max-width: 95%; 
 
} 
 

 
#header{ 
 
    position: ; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Lakeside Books</title> 
 
    <link rel="stylesheet" type="text/css" href="masterstyle.css"> 
 
    <meta name="viewsize" content="width-device-width,initial-scale=1.0"> 
 

 
    <!--[if IE]> 
 
    <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 
<div id="wrapper"> 
 
    <div id="sidebar"> 
 
     <nav id="nav"> 
 
      <h3 style="text-align: center">Welcome To<br>Lakeside Books</h3> 
 
      <div id="searchbar"> 
 
       <form action="http://www.example.com/search.php"> 
 
        <input type="text" name="search" placeholder="....Search Book Title"/> 
 
       </form> 
 
      </div> 
 
      <ul> 
 
       <li> 
 
        <a class="link"> 
 
         Home 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a class="link"> 
 
         Categories 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a class="link"> 
 
         Bestsellers 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a class="link"> 
 
         Contact 
 
        </a> 
 
       </li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 

 
    <div id="header"> 
 
     <h1>Lakeside Books</h1> 
 
    </div> 
 

 
</div> 
 
</body> 
 
</html>

来源

2015-04-19 SavageSpud

有解决它不止一个方面，它取决于什么是你想例如做...的的#header现在是可用宽度的100％ - 包含它的元素（因为它是块元素（在这种情况下为div）的默认值，并且您没有以其他方式设置它），当#sidebar大约为可用宽度的20％时，并且在position: fixed;因此20％ #header会像这样留在#sidebar下面。

例如，您最多可以将#header设置为width: 80%;，并将其贴在右侧（相反侧）。你不必使用固定位置或绝对位置，你可以对两个元素（一个左边和另一个右边）使用“float”，这样他们就不会“超出”其他外部元素，不要“ t忘记将元素设置为clear: both;后的元素使用“float”，因为它会“破坏”包装元素，因此在这种情况下将其设置为#wrapper。（可以设置overflow: hidden;到#wrapper指定代替，但它会隐藏所有的东西方元素的情况下，你要使用一个技巧或东西...

来源

2015-04-19 23:36:36

谢谢你，根本没有想到它！ – SavageSpud

与position: fixed;或position: absolute;的元素是越来越从分离页面的初始流量和停留在它上面。

如果几个要素有其position: fixed;第一个在你的HTML宣布将低于，而最后一个以上的，除非你用CSS属性z-index指定。

就你而言，因为你的侧边栏有width: 20%;你可以最终给你的身体一个margin-left: 20%;。

来源

2015-04-19 23:37:40 Raoulito

问题是你的侧边栏是固定的，其余的是默认的。

最简单的解决方法（和几种可能性之一）是添加margin-left: X;到header，或者如果侧边栏是静态的，你可以考虑在CSS它添加到body。

有关潜在解决方案，请参阅this JSFiddle。

关于不同CSS位置如何相互作用的进一步阅读可以在here找到。

来源

2015-04-19 23:39:37 Pudd

标题DIV走在侧边栏Div

回答

相关问题