Question

我想知道为什么这些p元素似乎没有位于其父元素footer中。

我的想法是，由于p元素是footer元素的子元素，因此它们应位于同一位置。但是，当我使用footer突出显示background-color: red;的背景时，它们位于完全不同的位置，看起来p的内容已从底部的footer框中移开了页面footer似乎在中心。这是我一直在使用的代码：

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: hsl(190, 33%, 58%);
  height: 500px;
}

header {
  background-color: hsl(190, 33%, 35%);
  position: fixed;
  width: 100%;
  height: 50px;
  border: 3px solid black;
  z-index: 2;
}

header .headerpos {
  position: relative;
  left: 135px;
}

header .headerpos h2 {
  display: inline;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  position: relative;
  top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

body p {
  position: relative;
  width: 50%;
  top: 250px;
  left: 325px;
}

footer {
  position: relative;
  top: 300px;
  text-align: center;
  height: 100px;
  width: 100%;
  background-color: red;
}

<header>
  <div class="headerpos">
    <a href="home.html">
      <h2>HOME</h2>
    </a>
    <a href="fruit.html">
      <h2>FRUIT</h2>
    </a>
    <a href="about.html">
      <h2>ABOUT</h2>
    </a>
  </div>
</header>

<body>
  <p>
    The fruit site is an independent project that was created for the purpose of developing my skills with HTML and CSS. While the appearance and layouts are naive, the more I experiment with things, the more I learn!
  </p>
</body>
<footer>
  <p>Author: Person</p>
  <p>Contact: email@place.edu</p>
</footer>

Answer 1

您的HTML无效。如果您有used a validator，将会接听。

不允许footer元素是html元素的子元素（header元素也不可以）。您似乎对the body element的the main element和the header element的the nav element感到困惑。

浏览器执行的错误恢复将footer和header元素移动到body元素内（允许的位置）。

这会使带有选择器body p的CSS规则集应用于footer内的段落，并因此移动其呈现的位置。

编写有效的HTML
调整CSS选择器以匹配更正后的HTML

Answer 2

问题在于

body p {
    position: relative;
    width: 50%;
    top: 250px;
    left: 325px;
}

尝试此操作，它将用于您的HTML

body > p {
    position: relative;
    width: 50%;
    top: 250px;
    left: 325px;
}

您的HTML无效。页眉和页脚应位于体内。

Answer 3

您需要将header和footer标签放置在正文中。两种解决方法：
在“ div”中写入 p 标记，或在正文中的 p 标记中定义一个“类”，然后为该类指定样式。这样，您可以为单个标签或元素定义样式。
如果您需要全局样式或在“ body p”处定义的样式，则将样式定义为“ footer p”，如下所示。

解决方案：

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: hsl(190, 33%, 58%);
    height: 500px;
}

header {
    background-color: hsl(190, 33%, 35%);
    position: fixed;
    width: 100%;
    height: 50px;
    border: 3px solid black;
    z-index: 2;
}

header .headerpos {
    position: relative;
    left: 135px;
}

header .headerpos h2 {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

body p {
    position: relative;
    width: 50%;
    top: 250px;
    left: 325px;
}

footer {
    position: relative;
    top: 300px;
    text-align: center;
    height: 100px;
    width: 100%;
    background-color: red;
}

footer p{
    position: relative;
    width: 50%;
    top: 0px;
    left: 325px;;
}

<!DOCTYPE html>
<html>

<head>
    <title>About the Fruit Site</title>
    <link href="index.css" type="text/css" rel="stylesheet">
</head>

<body>
    <header>
        <div class="headerpos">
            <a href="home.html">
                <h2>HOME</h2>
            </a>
            <a href="fruit.html">
                <h2>FRUIT</h2>
            </a>
            <a href="about.html">
                <h2>ABOUT</h2>
            </a>
        </div>
    </header>
    <div>
        <p>
            The fruit site is an independent project that was created for the purpose of developing
            my skills with HTML and CSS. While the appearance and layouts are naive, the more I experiment
            with things, the more I learn!
        </p>
    </div>
    <footer>
            <p>Author: Person</p>
            <p>Contact: email@place.edu</p>
        </footer>
</body>


</html>

Answer 4

如果将 footer 元素移到 body 元素内，然后相应地修改CSS，则应该解决您的问题。原因是因为 footer 元素不能是 html 元素的子元素。

<header>
  <div class="headerpos">
    <a href="home.html">
      <h2>HOME</h2>
    </a>
    <a href="fruit.html">
      <h2>FRUIT</h2>
    </a>
    <a href="about.html">
      <h2>ABOUT</h2>
   </a>
  </div>
</header>

<body>
  <p>
    The fruit site is an independent project that was created for the purpose of 
   developing my skills with HTML and CSS. While the appearance and layouts are 
   naive, the more I experiment with things, the more I learn!
  </p>
  <footer>
    <p>Author: Person</p>
    <p>Contact: email@place.edu</p>
  </footer>
</body>

<p>元素似乎不在父<footer>元素之内

4 个答案: