定位元件故障
定位元件故障
提问于 2018-01-08 20:26:14
在我的页面中，我很难用标题div之外的元素找到正确的位置。我希望它能在div之后/下面自动定位，而不是在里面。
我想“定位:修复”正在破坏文档流，有什么方法可以绕过它，所以我不需要使用它？我之所以使用它，是因为我想要一个标题背景图像。
我觉得自己解决不了这件事真的很愚蠢。
我能得到你的帮助吗？
HTML和CSS代码：
.header {
left: 0;
top: 0;
height: 50%;
position: fixed;
right: 0;
z-index: -1;
}
.pic1 {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.menu {
float: right;
margin-right: 30px;
margin-top: 10px;
}
.font {
color: gray;
text-decoration: none;
font-size: 20px;
h1 {
color: yellow;
}<!DOCTYPE html>
<html>
<head>
<title>Gesällprov</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<div class="menu">
<a class="font" style="margin-right:30px" href="">HOME</a>
<a class="font" style="margin-right:30px" href="">SHOP</a>
<a class="font" style="margin-right:30px" href="">ABOUT US</a>
<a class="font" style="margin-right:30px" href="">CONTACT</a>
</div>
<img class="pic1" src="pic1.jpg" alt="fake.jpg">
</div>
<h1>test</h1>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-08 20:56:01
元素.header已从自然文档流中删除，因此它以前占用的空间不再被占用--将此元素视为不再是同级元素的一部分或与其交互。这就是为什么h1元素看起来“在”这个元素的“内部”，它实际上在它下面。
要解决这个常见的问题，您需要考虑空间(height)，如果DOM仍然是正常文档流的一部分，这个绝对定位的元素就会在DOM中占据位置。
在这个特殊的例子中，这个值是动态的；元素的height是不同的，您还需要使用相对长度值(如百分比值)来抵消这个空间。
考虑在适当的元素上声明margin或padding属性。在这种情况下，更好的选项可能是在padding-top元素上声明一个body属性，例如：
body {
padding-top: 25%; /* adjust accordingly to suit requirements */
}注意:如果有必要，尝试使用@media查询为各种分辨率相应地调整此属性值。
代码片段演示：
/* Additional */
body {
padding-top: 25%; /* adjust accordingly to suit requirements */
}
.header {
left: 0;
top: 0;
height: 50%;
position: fixed;
right: 0;
z-index: -1;
}
.pic1 {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.menu {
float: right;
margin-right: 30px;
margin-top: 10px;
}
.font {
color: gray;
text-decoration: none;
font-size: 20px;
}
h1 {
color: black;
}<!DOCTYPE html>
<html>
<head>
<title>Gesällprov</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<div class="menu">
<a class="font" style="margin-right:30px" href="">HOME</a>
<a class="font" style="margin-right:30px" href="">SHOP</a>
<a class="font" style="margin-right:30px" href="">ABOUT US</a>
<a class="font" style="margin-right:30px" href="">CONTACT</a>
</div>
<img class="pic1" src="https://placehold.it/800x225" alt="fake.jpg">
</div>
<h1>test</h1>
</body>
</html>
Stack Overflow用户
发布于 2018-01-08 20:57:52
只是使用margin-top
HTML：
<div class="content">
<h1>test</h1>
</div>CSS：
.content{
margin-top:32px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48157566
复制相关文章
相似问题
腾讯云开发者
