2016-09-16 54 views
1

我有谷歌一個小時,並與自己的代碼搞砸了。我似乎無法找到爲什麼我的div不想坐在彼此之上。阻止Div進入其他Div

一個div位於另一個下面,我現在有一個腦屁,任何建議都會有所幫助。

重申一個問題:如何讓所有div壓下其他div的內容而不是在下面的div下面?

這裏是Codepen重新創建我有問題:https://codepen.io/livinglegendparagon/pen/wzWwya

/* BG */ 
    body { 
    background-color: #000; 
    color: #000; 
    } 

    #bg { 
     height: 100%; 
     width: 100%; 
     left: 0; 
     top: 0; 
     opacity: 1; 
     position: relative; 
     height: -webkit-calc(100vh); 
     height: -moz-calc(100vh); 
     height:   calc(100vh); 
    } 
    #PUTBACKGROUNDHERE, #PUTBACKGROUNDHERE2, #PUTBACKGROUNDHERE3, #PUTBACKGROUNDHERE4 { 
    background-color: #fff; 
    width: 100%; 
    position: relative; 
    height: 100%; 
    // min-height: -webkit-calc(100vh); 
    // min-height: -moz-calc(100vh); 
    // min-height:   calc(100vh); 
    padding: 2.5% 0; 
    background-color: #fff; 
    display: block; 
    float: left; 
    clear: both; 
    @media (min-width: 280px) { 
     padding: 2.5% 5%; 
    } 
    } 
    #backGroundForViewWelcome { 
    background-color: white; 
    min-height: -webkit-calc(100vh); 
    min-height: -moz-calc(100vh); 
    min-height:   calc(100vh); 
    } 
    .wrapper { 
    height: 100%; 
    width: 100%; 
    display: block; 
    } 
    .boxForServices { 
    position: relative; 
    height: 21.5vh; 
    margin: 3vh auto; 
    width: 100%; 
    color: white; 
    &:first-child { 
     margin-top: -webkit-calc(3vh + 40px); 
     margin-top: -moz-calc(3vh + 40px); 
     margin-top: calc(3vh + 40px); 
    } 
    &:last-child { 
     margin-bottom: -webkit-calc(3vh - 40px); 
     margin-bottom: -moz-calc(3vh - 40px); 
     margin-bottom: calc(3vh - 40px); 
    } 
    } 
    .boxForServicesTitle { 
    cursor: pointer; 
    position: relative; 
    text-align: center; 
    top: 50%; 
    border: red 5px solid; 
    background-color: blue; 
    border-radius: 5px; 
    margin: auto 5vh; 
    padding: 5vh 10%; 
    } 
    #sizeThisTextBoxForServices { 
    margin: 10% 10%; 
    width: 80%; 
    } 
    .centerBox { 
    margin: auto; 
    text-align: left; 
    } 
    .otherInput { 
    display: block; 
    width: 100%; 
    margin-bottom: 5%; 
    } 

回答

0

.boxForServices缺少高度屬性

添加的100%的高度,它會解決這個問題。

我喜歡提問,因爲一旦我發佈問題,答案就會一直出現。

 .boxForServices { 
     position: relative; 
     height: 21.5vh; 
     margin: 3vh auto; 
     width: 100%; 
     height: 100%; 
     color: white; 
     &:first-child { 
      margin-top: -webkit-calc(3vh + 40px); 
      margin-top: -moz-calc(3vh + 40px); 
      margin-top: calc(3vh + 40px); 
     } 
     &:last-child { 
      margin-bottom: -webkit-calc(3vh - 40px); 
      margin-bottom: -moz-calc(3vh - 40px); 
      margin-bottom: calc(3vh - 40px); 
     } 
     }