html - 无法将 div 定位在另一个 div 下

Question

我正在做一个前端项目，我想将一个div元素放置flex-container在另一个 div元素下面position:relative。在第一个 div 上方我有一个带有 position:absolute 的 div 元素，这是我的 flex-container 项目粘贴的地方，而不是在另一个 div 下方position:relative

我的代码：

.html,.body{
    background-size: cover;
    
}

body{
    overflow-x: hidden;
}
.welcome-container{
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height:550px;
    margin:0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');


}

.welcome-pic img {
    width:100%;
    height:550px;
    opacity: 0.8;
}

.inside-pic{
    top:30%;
    left:50%;
    position:absolute;
    font-size: 60px;
    transform: translate(-50%, -50%);
}

.inside-pic h3{
    font-size:18px;
}

.company-container{
    position: absolute;
    background-color:white;
    width:100%;
    top:80%;
}

.company-container p{
    text-align: center;
    font-size: 30px;
}

.company-container #company-info{
    text-align:center;
    font-size: 30px;
    position: relative;
    bottom: 90px;
}

.logo-container{
    width:100%;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    background-color: white;
    left:22%;
    top:50%;
}

.logo-container div{
    margin:80px;
    font-size: 50px;
}

.services-container{
    display: flex;
    flex-flow:row wrap;
    position: relative;
    top:-100px;
    width:100%;
}

.services-container div{
    margin:100px;
    font-size:50px;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class = "welcome-container">
      <div class = "welcome-pic">
        <img src = "IMAGES/welcome_pic.jpg" alt="#">
        <div class = "inside-pic">
          FLY WITH  DS <br/> AIRLINES
          <h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3> 
        </div>
      </div>
    </div>
    <div class="company-container">
      <p>Welcome to our company </p>
      <div class = "logo-container">
          <div><i class="fas fa-file"></i><p>File</p></div>
          <div><i class="fas fa-cloud"></i><p>Cloud</p></div>
          <div><i class="material-icons">computer</i><p>PC</p></div>
          <div><i class="fa fa-twitter"></i><p>TWITTER!</p></div>
      </div>
      <p id = "company-info"> our clients love us  . <br/>
   
      </p>
    </div>
    <div class="services-container">
        <div>1</div>
        <div>2</div>
        <div>4</div>
    </div>

services-container必须位于元素company-container下方。所有其他元素都在我的代码中完美定位，除了 . 感谢您对此的帮助。

标签： htmlcssflexboxposition