将div放在彼此之下

我想将div放在其他div的下面。而不是被放置在彼此之下他们覆盖。将div放在彼此之下

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

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

理想情况下，我想将navbar和图像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; 
}

来源

2016-02-17 Juan Sierra

当您添加position：absolute;任何事情，你从页面的自然流程中删除它，所以下一个项目不会轻易跟随它 –

因为你.bkgimage div有position: absolute下一个DIV不知道.bkimage div的位置，自然进入底部相对定位的下一个块级元素，例如，你的.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设置的空白-top到-20px（在箭头下推），而是使用padding-top：150px，它修复了您的容器模型布局（您的边距从先前的div下推，您的padding压下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 Bootstrap正常工作的结构。上面的修补程序适用于您当前的HTML，但您会遇到问题时会出现如此类似的标记

来源

2016-02-17 15:57:54 elmarko

这可能是更好的使用float CSS，而不是位置属性。

首先高度增加100％，对身体和HTML：

html, body { 
    height:100%; 
}

变化.bkgimage浮动，而不是位置：

.bkgimage { 
    float:left; 
}

Working Example

来源

2016-02-17 15:44:48 tohood87

在引导你必须使用行，如果你想添加一个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>

来源

2016-02-17 15:51:25 Koschtik

将div放在彼此之下

回答

相关问题