CSS 导航列表重叠文本答案

【问题标题】：CSS navigation list overlapping textCSS 导航列表重叠文本
【发布时间】：2017-07-17 13:41:58
【问题描述】：

我在 Visual Studio 2015 中有一个 html 和 css 文档。当我从 html 请求 CSS 文件时，它无法正确加载并与 h1 和 p 标签重叠。

html:

body{
    background-color: cyan;
    }
    ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em;
    }
    ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black 
    }
    ul.navbar a {
    text-decoration: none 
    }
    a:link {
    color: blue 
    }
    a:visited {
    color: blue 
    }

 <!DOCTYPE html>
    <html>
    <head>
    <title>Empty</title>
	<meta charset="utf-8" />
    <link href="CSS/Style1.css" rel="stylesheet" />
    </head>
    <body>
    <ul class="navbar">
        <li><a href="Index.html">Index</a>
        <li><a href="Empty.html">Empty</a>
    </ul>
    <h1>Welcome to Alex's Website, this is not useful at all!</h1>
<p>Text text text, bla bla bla.</p>
    </body>
    </html>

我不知道是什么导致了这个问题。

【问题讨论】：

标签： html css asp.net visual-studio

【解决方案1】：

position: absolute; 从文档流中删除元素。因此它会遍历您的元素，因为它是绝对定位的，并且不受其他元素的影响。

删除这个：

position: absolute;
top: 2em;
left: 1em;

来自您的 ul.navbar 块。

或者，如果您不想更改标题的确切位置，可以将 padding-top: 100px; 添加到您的 body 块中，以将其余内容向下推，不碍事。

【讨论】：

【解决方案2】：

如果您在谈论重叠 h1 或 p 标记的列表，我认为这是因为您有 ul.navbar - position:absolute。删除它并尝试其他方法。

【讨论】：