Question

我是一名初学者Web开发人员，并且正在制作主页。但是我被困住了：由于某些原因，我的div不会像他们应该的那样彼此叠放（至少我认为是这样），无论我做什么，蓝色的div都会一直出现在页面中央。我尝试了很多事情，没有任何解决办法。

帮助！最好的问候，

-太阳棕榈

PS：有我的代码...

body{
	background:url(trees.jpg);
	background-size:cover;
	background-postion: center;
}
h1{
color: white;

}
main{
text-align: center;
padding-top: 15%;
}
.lol{
	width: 100%;
	height: 100%;
	clear: left;


}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Home</title>
	<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" type='text/css' href="Home.css">
<!-- The JQuery Link -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
	<!-- HUGE NAVBAR -->
	<div class='lol'>
	<header id="header" style="position:sticky; top:0;">
		<div class='container'>
      </style>
		<nav class="navbar navbar-default">
  			<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header" >
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">GREEN Seed</a>
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-left:15%;">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">Home</a></li>
		        <li><a href="#">Our Projects</a></li>
		        <li><a href="#">Rules</a></li>
		        <li><a href="">About Us</a></li>

		      </ul>
		          <form class="navbar-form navbar-left" style="margin-left:20%">
		          <div class="form-group">
		            <input type="text" class="form-control" placeholder="Search">
		          </div>
		           <button type="submit" class="btn btn-default">Submit</button>
		         </form>
		        </li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
	</header>
</div>
	<main>
		<h1>Are you ready to help to save Our planet!</h1>
		<button class="btn btn-default btn-lg">Take actions!</button>

	</main>
</div>
<div class='lol' style='background-color: blue; height:100px;'>
	</div>


</body>
</html>

为什么我的div不能互相叠加？

0 个答案: