Question

我试图把我的导航栏放在我的大标题之下，但是它正在它的前面，它甚至不在它的上方，但在前面有点

showing the problem

在代码中，导航栏位于＆＃34; Debugando＆＃34;但它显示在它上面，我希望它留在它下面，但它不起作用，我无法找到原因。我认为这是关于职位或浮动的。

代码（First Css then html）：

＆＃13;

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: Josefin Sans, sans-serif;
}

.navbar {
	background: #428F48;
	height: 40px;
	border-radius: 0px;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.nav {
	margin-top: 5px;
	margin-left: 50px;
}

.nav-pills>li {
	font-size: 24px;
	margin-left: 20px;
}

.jumbotron {
	background: #27b032;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
}

.title {
	font-size: 80px;
	margin-left: 10%;
	padding:  40px 0 40px 0;

	float: left;	
}

.description {	
	font-size: 20px;
	margin-left: 5%;
	padding-left: 3%;
    border-left: 1px solid black;
    height: 60px;
    margin-top: 65px;

    float: left;
    text-align: center;
}

.description span{
	margin-top: 15px;
	position: absolute;
}

.dot {
		-webkit-animation-name: blink;
		-webkit-animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		-webkit-animation-iteration-count: infinite;


		animation-name: blink;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
		
		25% {opacity: 100;}
		50% {opacity: 0;}
		25% {opacity: 100;}

}

@keyframes blink {
		25% {opacity: 100;}
		50% {opacity: 0;}
		25% {opacity: 100;}
}

html:

＆＃13;

<html>

<head>

	<title>Debugando</title>
	
	<meta charset="UTF-8">

	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">


	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,700&subset=latin-ext' rel='stylesheet' type='text/css'> 

</head>

<body>
	
	<!--- Top -->
	<div class="content-fluid">

		<div class="jumbotron">

						<div class="title">
							
							<span>Debugando</span><span class="dot">.</span>

						</div>
					

						<div class="description">
							
							<span>

							Descrição foda será inserida aqui.

							</span>

						</div>
					
		</div>

		<div class="navbar">
			
			<ul class="nav-pills">

				<li>Início</li>
				<li>Contato</li>

			</ul>

		</div>

	</div>

<!--<script src="js/jquery-2.1.3.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
</body>

</html>

＆＃13;

如果需要，我可以使用bootstrap。感谢您的帮助！

Answer 1

首先，如果你使用bootstrap，你需要使用类.jumbotron将.clearfix添加到div中。

<div class="jumbotron clearfix">

然后从.jumbotron

中删除绝对定位

.jumbotron {
    background: #27b032;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

希望这会有所帮助。

内容上方的导航栏（如上图所示）

1 个答案: