我想知道为什么这些 p 元素似乎没有定位在它们的父元素 footer 中。
我的想法是，由于 p 元素是 footer 元素的子元素，因此它们应该位于同一位置。但是当我使用 background-color: red; 突出显示 footer 的背景时，它们位于完全不同的位置，看起来像 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>最佳答案
您的 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
关于html - <p> 元素似乎不在父 <footer> 元素中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56674807/