Question

在1分钟之前，我开始开发一个网站。

起初我开始将标题的位置固定，然后我创建了名为“all”的包装div，但是这个div没有出现请给我一个解决方案。

body {
  margin: 0px;
  padding: 0px;
  font-size: 1.5em;
  font-family: Haettenschweiler;
}

#header {
  height: 60px;
  background: #363333;
  position: fixed;
  width: 100%;
}

.header {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

#logo {
  float: left;
  font-size: 40px;
  color: white;
}

#menu {
  float: right;
  margin-right: 200px;
}
.menu{
	list-style-type:none;	
}
.menu li{
	float:right;
	font-size:24px;
	display:block;
	min-width:125px;	
	text-align:center;
	margin-left:5px;
}
.menu li a{
	min-width:125px;
	display:block;
	color:white;
	text-decoration:none;	
}

#all {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  font-family: Gloucester MT;
}
#left{
	float:left;
	background:yellow;
	width:13%;
}
#right{
	float:right;
	background:yellow;
	width:13%;
}
#center{
	margin-left:auto;
	margin-right:auto;
	background:red;
}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="header">
	<div class="header">
		<div id="logo">1111</div>
		<div id="menu">
			<ul class="menu">
				<li><a href="1.php">1</a></li>
				<li><a href="2.php">2</a></li>
				<li><a href="3.php">3</a></li>
				<li><a href="4.php">4</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="all">
	<div id="left">sadf</div>
	<div id="right">sasadf</div>
	<div id="center">sadf</div>
</div>
</body>
</html>

Answer 1

使用.all显示您的position: relative; div，并将top值设置为等于标题的height。

这是因为如果您没有设置position: relative;，则会显示它作为父级（网页）的参考，这就是为什么您的.all div显示在左上角的原因你的网页。

header显示在.all div的上方，因为它已修复，固定元素超出正常流量。

body {
  margin: 0px;
  padding: 0px;
  font-size: 1.5em;
  font-family: Haettenschweiler;
}

#header {
  height: 60px;
  background: #363333;
  position: fixed;
  width: 100%;
}

.header {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

#logo {
  float: left;
  font-size: 40px;
  color: white;
}

#menu {
  float: right;
  margin-right: 200px;
}
.menu{
	list-style-type:none;	
}
.menu li{
	float:right;
	font-size:24px;
	display:block;
	min-width:125px;	
	text-align:center;
	margin-left:5px;
}
.menu li a{
	min-width:125px;
	display:block;
	color:white;
	text-decoration:none;	
}

#all {
  position: relative;
  top: 60px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  font-family: Gloucester MT;
}
#left{
	float:left;
	background:yellow;
	width:13%;
}
#right{
	float:right;
	background:yellow;
	width:13%;
}
#center{
	margin-left:auto;
	margin-right:auto;
	background:red;
}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="header">
	<div class="header">
		<div id="logo">1111</div>
		<div id="menu">
			<ul class="menu">
				<li><a href="1.php">1</a></li>
				<li><a href="2.php">2</a></li>
				<li><a href="3.php">3</a></li>
				<li><a href="4.php">4</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="all">
	<div id="left">sadf</div>
	<div id="right">sasadf</div>
	<div id="center">sadf</div>
</div>
</body>
</html>

Answer 2

#all div位于#header div。

后面

它隐藏在这个div的高度，因为当你将元素的位置设置为absolute或fixed时，你将它从文档的流中取出。

声明padding-top规则，等于或大于#header的高度会将#all向下推到足够远的视野。

示例：

#all { padding-top: 60px; }

浏览器内开发＆amp;疑难解答提示
如果您通过浏览器的开发人员工具检查这些元素，您可以看到它们如何相互堆叠。例如，当您将鼠标悬停在开发人员工具控制台/ IDE中所述元素的标记上时，chrome将突出显示屏幕上的元素。

Answer 3

因为你的#header div有位置：fixed它不会影响其他元素的定位（即#all div）。因此，div会在彼此之上呈现。尝试删除位置：如果不需要，则从标题中修复。否则你必须手动向下移动#all div。

为什么它没有出现

3 个答案: