Question

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

HTML：

＆＃13;

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 
    }

＆＃13;

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

＆＃13;

我不知道造成这个问题的原因。

Answer 1

如果你在谈论重叠h1或p标签的列表，我认为它是因为你有ul.navbar - position：absolute。删除它并尝试别的。

Answer 2

position: absolute;从文档流中删除元素。所以它会覆盖你的元素，因为它位于绝对，并且不受其他元素的影响。

删除它：

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

从ul.navbar区块。

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

CSS导航列表重叠文本

2 个答案: