Question

我的代码有问题。

我无法移动div（我想将绿色div.free_space移到其他div.main_pic和div.navigation下面。我不知道为什么。我还在学习如果你能告诉我为什么会这样，我会很感激。如果你看到一些不正确的东西或者我可以升级的东西，请告诉我！

由于

以下是代码：

.main_pic {
    position: absolute;
    height: 600px;
    width: 92%;
    background: black;
    font-size: 20px;
    font-family: Century Gothic, Verdana;
    font-weight: normal;
    left: 4%;
    right: 4%;
    top: 200px;
}
.navigation {
    position: absolute;
    height: 50px;
    width: 30%;
    background: white;
    font-size: 15px;
    font-family: Century Gothic;
    font-weight: normal;
    left: 66%;
    right: 4%;
    top: 100px;
    vertical-align: middle;
}
.navigation ul {
    text-align: center;
    list-style:none;
}
.navigation li {
    display: inline;
    padding: 2.5%;
}
.navigation li a {
    text-decoration:none;
    color: #999999;
}
.navigation li a:visited {
    color:#4d4d4d;
}
.free_space {
    height: 600px;
    top: 900px;
    width: 100%;
    background: green;
}

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="main_pic"></div>
    <div class="navigation">
        <ul>
            <li><a href="#">ITEM</a></li>
            <li><a href="#">ITEM</a></li>
            <li><a href="#">ITEM</a></li>
            <li><a href="#">ITEM</a></li>
        </ul>
    </div>
    <div class="free_space"></div>
</body>
</html>

Answer 1

您可以添加margin-top，例如：

.main_pic{
  margin-top:-200px;
    position: absolute;
    height: 600px;
    width: 92%;
    background: black;
    font-size: 20px;
    font-family: Century Gothic, Verdana;
    font-weight: normal;
    left: 4%;
    right: 4%;
    top: 200px;
}

和

.free_space {
    margin-top:600px;
    height: 600px;
    top: 900px;
    width: 100%;
    background: green;
}

Answer 2

我不能完全确定所需的结果，但我想这就像我下面的代码片段。您应该仅使用绝对定位将一个元素放在另一个元素的顶部而不依赖于该元素。（然后父图像需要position: relative才能充当绝对的锚点）。除此之外，尝试根据文档流程中的顺序定位元素。

.main_pic {
  position: relative;
  height: 600px;
  width: 92%;
  background: black;
  font-size: 20px;
  font-family: Century Gothic, Verdana;
  font-weight: normal;
  margin: 0 auto;
}

.navigation {
  position: absolute;
  height: 50px;
  width: 240px;
  right: 0;
  background: white;
  font-size: 15px;
  font-family: Century Gothic;
  font-weight: normal;
  top: 100px;
}

.navigation ul {
  text-align: center;
  list-style: none;
}

.navigation li {
  display: inline;
  padding: 2.5%;
}

.navigation li a {
  text-decoration: none;
  color: #999999;
}

.navigation li a:visited {
  color: #4d4d4d;
}

.free_space {
  height: 600px;
  background: green;
}

<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="main_pic">
    <div class="navigation">

      <ul>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
      </ul>
    </div>
  </div>
  <div class="free_space"></div>
</body>

</html>

Answer 3

主要从position: absolute;课程中删除main_pic。

＆＃13;

.main_pic{
	height: 600px;
	width: 96%;
	background: black;
	font-size: 20px;
	font-family: Century Gothic, Verdana;
	font-weight: normal;
	left: 4%;
	right: 4%;
	top: 200px;
}
.navigation{
	position: absolute;
	height: 50px;
	width: 30%;
	background: white;
	font-size: 15px;
	font-family: Century Gothic;
	font-weight: normal;
	left: 66%;
	right: 4%;
	top: 100px;
	vertical-align: middle;
}
.navigation ul {
	text-align: center;
	list-style:none;
}
.navigation li {
	display: inline;
	padding: 2.5%;
}
.navigation li a {
	text-decoration:none;
	color: #999999;
}
.navigation li a:visited{
	color:#4d4d4d;
}
.free_space {
	height: 600px;
	top: 900px;
	width: 96%;
	background: green;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="main_pic"></div>
	<div class="navigation">
		<ul>
			<li><a href="#">ITEM</a></li>
			<li><a href="#">ITEM</a></li>
			<li><a href="#">ITEM</a></li>
			<li><a href="#">ITEM</a></li>
		</ul>
	</div>
	<div class="free_space"></div>
</body>
</html>

＆＃13;

Answer 4

删除位置：绝对; 来自style.css
.main_pic 我已经检查了

无法在CSS中移动下面的div

4 个答案: