Question

我正在尝试将div放在其他div之下。它们不是叠加在一起，而是叠加在一起。

页面外观概述：我正在使用bootstrap来设计它。我正在使用一个固定的导航栏，中间有品牌标识。在导航栏下方，我放置了一张图片。

导航栏和图像堆栈的div很好但是当我尝试在图像下方添加另一个div时，它会覆盖图像并进入导航栏下方而不是图像下方。

理想情况下，我想将导航栏和图像div放在容器中，但我没有成功尝试这样做。

的index.html

<!DOCTYPE html>
<html>
<head>
  <title>welcome</title>

  <!-- Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <!-- AnjularJs -->
  <script src="js/angular.min.js"></script>

  <!-- css files -->
  <link rel="stylesheet" href="navBar.css">
</head>
  <body>
    <!-- Navigation Bar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
          <a class="navbar-brand">Name</a>
        </div>
    </div>
    <!-- End of Navigation Bar -->

    <div class="arrow"></div>

    <!--Image-->
    <div class=bkgimage><h1>Slogan</h1></div>
    <!--End of image -->

    <!-- Want to add another div here -->
  </body>
</html>

navBar.css

body {
  padding:0px;
  margin:0px;
}
.navbar-brand {
  display:inline-block;
  float:none;
  color:white;

  font-family: Arial, Helvetica, sans-serif;
  font-style:italic;
  font-size: 50px;
  font-weight: bold;
  font-variant: small-caps;
}
.navbar {
  position:relative;
  margin: 0px;
  padding:10px;
  text-align:center;
  background-color: #00b3b3;
  border:none;
}
.arrow {
  position:absolute;
  left:50%;
  margin-left: -20px;
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top: 20px solid #00b3b3;
  z-index:2;
}
.navbar-default .navbar-brand {
  color:white;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
  color:white;
}
.bkgimage {
  position: absolute;
  background-image: url('test.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:75%;
}
.bkgimage h1 {
  color:  white;

  font-family: Arial, Helvetica, sans-serif;
  font-style:italic;
  font-size: 40px;
  font-weight: bold;
  font-variant: small-caps;

  text-align: center;
  margin-top: 150px;
}

Answer 1

因为你的.bkgimage div有position: absolute，所以下一个div不知道.bkimage divs位置并自然地到达下一个块级元素的底部，该元素位于相对位置。你的.navbar-fixed-top div。

在这里查看你的css的一个快速解决方法是使用相对定位和视口高度测量以获取.bkimage div的容器大小：

.bkimage{
 position: relative;
  background-image: url('http://placehold.it/300x250');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:75vh;
}

和你的.bkgimage h1将margin-top设置为-20px（按下箭头），而是使用padding-top：150px修复此容器的盒子模型布局（你的边距从前一个div向下推，你的填充按下了div的内部内容，例如

.bkgimage h1 {
  color:  white;
  font-family: Arial, Helvetica, sans-serif;
  font-style:italic;
  font-size: 40px;
  font-weight: bold;
  font-variant: small-caps;
  text-align: center;
  padding-top: 150px;
  margin-top: -20px;
}

正如Koschtik所提到的，您需要解决HTML for Bootstrap的结构才能正常工作。上面的修复程序适用于您当前的HTML，但是您会很快遇到问题，标记结构如此

Answer 2

使用float CSS而不是position属性可能会更好。

首先将身高100％添加到身体和html：

html, body {
   height:100%;
}

将.bkgimage更改为float而不是position：

.bkgimage {
   float:left;
}

Working Example

Answer 3

在Bootstrap中你必须使用行，如果你想添加一个div unter另一个div这样：

<div class="row">
      <div>...</div>
</div>
<div class="row">
      <div>...</div>
</div>

你必须将你的行放入一个容器中，如下所示：

<div class="container">
    <div class="row">
          <div>...</div>
    </div>
    <div class="row">
          <div>...</div>
    </div>
</div>

将div放在彼此之下

3 个答案: