文本显示在我的 html 页面的侧边栏后面

Question

所以我有一个 html 页面，左侧有一个侧边栏，但每当我想在页面上放置一些文本时，其中一些会在所述侧边栏后面，我不知道如何使文本永远不会被它遮挡。

这里是 css 代码：

a {
    text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
    color: #050213;
    text-decoration: none
}

@media (max-width: 600px) {
    .main {
        border-radius: 0px;
    }
}

.sidenav {
    height: 100%;
    /* Full-height: remove this if you want "auto" height */
    width: 160px;
    /* Set the width of the sidebar */
    position: fixed;
    /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    background-color: #111;
    /* Black */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 20px;
}


/* The navigation menu links */

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
    color: #f1f1f1;
}


/* Style page content */

.main {
    margin-left: 160px;
    /* Same as the width of the sidebar */
    padding: 0px 10px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

页面上是这样的：

编辑这是 html 代码：

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="sidebar.css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <title>Templates</title>
</head>

<body>

    <div class="sidenav">
        <a href="main.html">Creeaza test</a>
        <a> </a>
        <a href="preview.html">Preview templates</a>
        <a> </a>
        <a href="verifica.html">Verifica teste</a>
        <a> </a>
        <a href="signin.php">Log out</a>
        <a> </a>



    </div>




    <p>Asta e un test>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></p>

</body>

</html>

Answer 1

我发现你的问题是你在 CSS 中添加了 CSS 但你没有在 HTML 中使用 class。

以及您要添加的内容 <div class="main"></div>

例如

<div class="main">
        <p>Asta e un test>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></p>
</div>

完整代码

a {
    text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
    color: #050213;
    text-decoration: none
}

@media (max-width: 600px) {
    .main {
        border-radius: 0px;
    }
}

.sidenav {
    height: 100%;
    /* Full-height: remove this if you want "auto" height */
    width: 160px;
    /* Set the width of the sidebar */
    position: fixed;
    /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    background-color: #111;
    /* Black */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 20px;
}


/* The navigation menu links */

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
    color: #f1f1f1;
}


/* Style page content */

.main {
    margin-left: 160px;
    /* Same as the width of the sidebar */
    padding: 0px 10px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

<!-- <section>
<div class="sidenav">
  <ul>
    <li><a>sas</a></li>
    <li><a>sas</a></li>
    <li><a>sas</a></li>
  </ul>
</div>
<div class="main">
  dds
</div>
</section> -->

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="sidebar.css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <title>Templates</title>
</head>

<body>

    <div class="sidenav">
        <a href="main.html">Creeaza test</a>
        <a> </a>
        <a href="preview.html">Preview templates</a>
        <a> </a>
        <a href="verifica.html">Verifica teste</a>
        <a> </a>
        <a href="signin.php">Log out</a>
        <a> </a>
    </div>
    <div class="main">
        <p>Asta e un test>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></p>
  </div>
</body>

</html>

Answer 2

您的边栏有 fixed 位置，这意味着它已从页面上其余元素的层次结构中删除。所以文本基本上是从最左边开始的，现在是在侧边栏下面。

您可以做的是为您的所有内容创建一个父容器，并将其放置在左边距中，其值等于边栏的宽度。

+------+---------------------------+
|      |                           |
| Side | Content                   |
| bar  |                           |
|      |                           |
|      |                           |
+------+---------------------------+

.sidebar { width : 160px; }

.content { margin-left : 160px; }

现在将所有文本放入 .content 元素中。

文本显示在我的 html 页面的侧边栏后面

Text shows up behind a sidebar on my html page

html

css

sidebar