Wie kann ich das Überlappen von HTML-Elementen schützen?

Question

Zwei Div, einander überlappend. wenn ich ein Padding auf main-wrap-inner div hinzufügen, dann überlappt es nicht. Aber Padding ist nicht für alle Browser fruchtbar.

Ich habe diesen 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> 

Und die CSS sind:

.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; 
} 

Jetzt Problem der div mit fullpage ist unter dem div mit main-wrap-inner gehen. Wie kann ich diese Überlappung schützen?

Answer 1

auch geschieht dies, weil die .navbarposition:fixed hat und es bleibt je nach Dokument nicht davon Container ist, auch wenn Sie position:relative auf .main-wrap gesetzt.

position:fixed holt das Element aus seinem Container. also überlappt es alles.

ich sah, dass Sie ein min-height:100px; auf .aog-navbar so sollten Sie unten, um ein margin-top von mindestens 100px auf der .charity-content oder #fullpage div

Snippet gesetzt zu sehen. lassen Sie mich wissen, ob es

hilft über mehr zu lesen position sehen hier: 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>