我正在为作品集创建一个网页，当我创建一个带有 h2 和 p 标签的部分时，p 标签会跳起来到 Angular 落。知道为什么会这样吗？
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Comfortaa" rel="stylesheet">
<link rel="stylesheet" href="index.css" />
<title>Scriptura</title>
</head>
<body>
<nav class="header-nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Support Us</a></li>
<li><a href="#">GitHub</a></li>
</ul>
</nav>
<header>
<h1>Welcome To <em>Scriptura</em></h1>
<p>The premier note-taking software on the web!</p>
</header>
<section>
<h2>What Is <em>Scriptura</em></h2>
<p>It's just my thing</p>
</section>
<script src="index.js"></script>
</body>
</html>
CSS:
body {
animation: bg-animation 1s ease-in-out 0s infinite alternate both;
margin: 0;
font-family: Open Sans, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Comfortaa, sans-serif;
}
a {
text-decoration: none;
color: black;
}
header {
position: relative;
margin: 0 auto;
padding: 10px;
text-align: center;
background-color: white;
height: 600px;
}
header h1, p {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
margin: 0;
}
header h1 {
line-height: 540px;
}
header p {
line-height: 620px;
}
.header-nav {
text-align: right
}
.header-nav ul {
list-style-type: none;
margin: 0;
}
.header-nav li {
display: inline-block;
padding: 20px;
transition: background-color 0.1s ease-in-out 0s;
}
.header-nav li:hover {
background-color: darkgrey;
}
@keyframes bg-animation {
from {
background-color: whitesmoke;
}
to {
background-color: white;
}
}
最佳答案
p 标签在你的 css 中有 position: absolute。这部分:
header h1, p {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
margin: 0;
}
如果父级没有相对位置，它将自己相对于文档定位。
要么改成这样:
header h1, header p {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
margin: 0;
}
或者删除它:
header h1{
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
margin: 0;
}
关于html - p标签随机出现在屏幕的一 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51412023/