P标签随机出现在屏幕的角落
P标签随机出现在屏幕的角落
提问于 2018-07-18 22:49:49
我正在为投资组合创建一个网页，当我创建一个带有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;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-18 23:07:30
这个CSS规则是问题所在(其中的绝对位置)：
header h1, p {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
margin: 0;
}原因:选择器header h1, p对于h1标记和任何p标记都是有效的，即对于section中的第二个标签也是如此。(不仅在header内部)
Stack Overflow用户
发布于 2018-07-18 22:55:07
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51412023
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号