Question

我正在创建一个用于投资组合目的的网页，当我创建带有h2和p标签的部分时，p标签会跳到角落。知道为什么会这样吗？

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

Answer 1

p标签的位置：在CSS中是绝对位置。这部分：

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

Answer 2

此CSS规则就是问题所在（其中的绝对位置）：

header h1, p {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
}

原因：选择器header h1, p适用于h1标签内的header标签和任何p标签，即{{1}内部的第二个标签也有效}。（不仅限于section内）

p标签随机出现在屏幕的角落

2 个答案: