定位元素有问题答案

【问题标题】：Trouble with positioning elements定位元素有问题
【发布时间】：2018-01-09 04:57:52
【问题描述】：

在我的页面中，我无法在标题 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>

【问题讨论】：

我认为一些解释是有帮助的：将一个元素放在另一个元素之后/之下需要定义的文档流。见Visual Formatting Model。将您的 <header> 定位为 fixed 会将其从正常的文档流中删除。见position @ MDN。实际上，没有“后”标题，因为它不占用文档流中的任何空间。

标签： html css

【解决方案1】：

元素.header 已从自然文档流中删除，因此它之前占用的空间不再被占用 - 将此元素视为不再是兄弟元素的一部分或与兄弟元素交互。这就是为什么h1 元素看起来在这个元素的“内部”，它实际上是在它的下面。

要解决这个常见问题，您需要考虑这个绝对定位元素在DOM中占用的空间（height）正常文档流程的一部分。

在这个特定的例子中，这个值是动态的；元素的height 会有所不同，您还需要使用 relative 长度值（如百分比值）来抵消这个空间。

考虑在适当的元素上声明margin 或padding 属性。在这种情况下，更好的选择可能是在 body 元素上声明 padding-top 属性，例如：

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>

【讨论】：

【解决方案2】：

只使用margin-top

HTML：

<div class="content">
    <h1>test</h1>
</div>

CSS：

.content{
    margin-top:32px;
}

【讨论】：