如何保護html元素重疊？

兩個Div，彼此重疊。如果我添加一些填充main-wrap-inner股利然後它不重疊。但填充對所有瀏覽器來說都不是富有成效的。如何保護html元素重疊？

我有這個網站：

<div class="main-wrap"> 
    <div class="main-wrap-inner"> 
     <nav class="navbar aog-navbar"></nav> 
    </div> 
    <div id="fullpage" class="container charity-content"> 
    <section></section> 
    <section></section> 
    </div> 
</div>

而CSS是：

現在

.main-wrap { 
     background: #ffffff none repeat scroll 0 0; 
     clear: both; 
     margin: 0; 
     min-height: 100%; 
     overflow: visible; 
     padding: 0; 
     position: relative; 
    } 
    .main-wrap-inner { 
     clear: both; 
     height: 100%; 
     min-height: 86px; 
     padding: 0; 
     position: relative; 
     width: 100%; 
    } 
    .main-wrap-inner { 
     height: auto; 
     min-height: inherit; 
     } 
    .aog-navbar { 
     -moz-border-bottom-colors: none; 
     -moz-border-left-colors: none; 
     -moz-border-right-colors: none; 
     -moz-border-top-colors: none; 
     background-color: #fff; 
     border-color: -moz-use-text-color -moz-use-text-color #ddd; 
     border-image: none; 
     border-style: none none solid; 
     border-width: 0 0 1px; 
     min-height: 100px; 
     z-index: 99; 
    } 
    .navbar { 
      margin-bottom: 20px; 
      position: fixed; 
    } 

.charity-content, .charity-content .container { 
    max-width: 1220px; 
    width: 100%; 
} 
.charity-content { 
    padding-left: 0; 
    padding-right: 0; 
}

問題是div與fullpage下div要與main-wrap-inner。我如何保護這個重疊？

來源

2016-07-28 Shahadat Atom

你可以擺弄這個？ –

發生這種情況是因爲'.navbar'上的'position：fixed'。請參閱下面的答案 –

以及出現這種情況是因爲.navbar有position:fixed和它保持取決於不是它的容器，即使你.main-wrap設置position:relative文檔。

position:fixed從它的容器中獲取元素。所以它重疊了一切。

我看到你設置一個min-height:100px;上.aog-navbar所以你應該在.charity-content或#fullpage格

請參見下面的代碼片段設置的最低100px一個margin-top。讓我知道，如果它可以幫助

閱讀更多關於position在這裏看到：CSS position

.main-wrap { 
 
     background: #ffffff none repeat scroll 0 0; 
 
     clear: both; 
 
     margin: 0; 
 
     min-height: 100%; 
 
     overflow: visible; 
 
     padding: 0; 
 
     position: relative; 
 
    } 
 
    .main-wrap-inner { 
 
     clear: both; 
 
     height: 100%; 
 
     min-height: 86px; 
 
     padding: 0; 
 
     position: relative; 
 
     width: 100%; 
 
    } 
 
    .main-wrap-inner { 
 
     height: auto; 
 
     min-height: inherit; 
 
     } 
 
    .aog-navbar { 
 
     -moz-border-bottom-colors: none; 
 
     -moz-border-left-colors: none; 
 
     -moz-border-right-colors: none; 
 
     -moz-border-top-colors: none; 
 
     background-color: #fff; 
 
     border-color: -moz-use-text-color -moz-use-text-color #ddd; 
 
     border-image: none; 
 
     border-style: none none solid; 
 
     border-width: 0 0 1px; 
 
     min-height: 100px; 
 
     z-index: 99; 
 
    } 
 
    .navbar { 
 
      margin-bottom: 20px; 
 
      position: fixed; 
 
    } 
 

 
.charity-content, .charity-content .container { 
 
    max-width: 1220px; 
 
    width: 100%; 
 
} 
 
.charity-content { 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    margin-top:100px; 
 
}

<div class="main-wrap"> 
 
    <div class="main-wrap-inner"> 
 
     <nav class="navbar aog-navbar">navbar here</nav> 
 
    </div> 
 
    <div id="fullpage" class="container charity-content"> 
 
    <section>section1</section> 
 
    <section>section2</section> 
 
    </div> 
 
</div>

來源

2016-07-28 07:45:43

謝謝@Mihai T –

如何保護html元素重疊？

回答

相關問題