Question

正如标题所说，我已经开始制作我现在已经完成的侧边栏，但是当我添加我的标题时，无论我给他们中的哪一个，标题div要么落后或坐在侧边栏div上方。

问题截图： Problem screenshot

对此的任何意见都表示高度赞赏。

＆＃13;

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: ;
}

＆＃13;

<!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>

＆＃13;

Answer 1

有多种方法可以修复它，它取决于你想要做什么......例如，＃header现在是可用宽度的100％ - 包裹它的元素（因为当#sidebar大约是可用宽度的20％并且在position: fixed;时，它是块元素的默认值（在这种情况下是div）并且你没有以其他方式设置它）你的#header的20％将保留在#sidebar之下。

例如，您可以将#header设置为最多width: 80%;并将其粘贴到右侧（相反的一侧）。

*你不必使用固定或绝对的位置，你可以使用＆＃34; float＆＃34;两个元素（一个左边和另一个），所以他们不会超过＆＃34;其他外部元素，在使用＆＃34; float＆＃34;的元素之后，不要忘记将块元素设置为clear: both;。因为它会打破＆＃34;打破＆＃34;包装元素，所以在这种情况下为#wrapper设置它。（您可以将overflow: hidden;设置为#wrapper，但是如果您尝试使用技巧或其他内容，它会隐藏元素旁边的所有内容......

Answer 2

position: fixed;或position: absolute;的元素与页面的初始流分离并保持在其上方。

如果有多个元素包含position: fixed;，则HTML中声明的第一个元素将在下面，而上一个元素将在上面，除非您使用CSS属性z-index指定它。

在您的情况下，由于您的侧边栏有width: 20%;，您最终可以为您的身体提供margin-left: 20%;。

Answer 3

问题在于侧边栏是固定的，其余部分是默认的。

最简单的修复（以及其中一种可能性）是将margin-left: X;添加到header，或者如果侧边栏是静态的，您可以考虑将其添加到body在css。

请参阅this JSFiddle了解可能的解决方案。

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

标题DIV落在侧边栏Div

3 个答案: