Wie verhindert man vertikale Überlappung von divs

Ich habe gearbeitet, um das Layout für eine Website zu entwerfen, aber ich habe einige Probleme mit Div-Überlappung. Ich habe untersucht, wie ich das verhindern kann und habe versucht, die Flexboxen zu benutzen, aber wenn ich sie richtig verwende, sehe ich immer noch keine Ergebnisse.Wie verhindert man vertikale Überlappung von divs

Da ich nicht sicher bin, was relevant ist, werde ich nur den Körper meines HTML teilen.

<body id="body"> 

    <div id="float"> 

    <div> 
     <div><strong>Home</strong></div> 
     <div><strong>Team</strong></div> 
     <div><strong>Projects</strong></div> 
     <div><strong>Contact</strong></div> 
    </div> 

    </div> 

    <!-- Background Logo --> 
    <div id="background"> 
    </div> 
    <!--End Background Logo --> 

    <!-- Main Navigation Menu - Top of screen. --> 
    <div id="NavigationMenu"> 
    <ul style="list-style-type: none;"> 
     <li><strong>Home</strong></li> 
     <li><strong>Team</strong></li> 
     <li><strong>Projects</strong></li> 
     <li><strong>Contact</strong></li> 
    </ul> 
    </div> 
    <!-- Main Navigation Menu - Top of screen. --> 

    <!-- Page Content --> 

    <div id="content-main"> 

    <h1>hello world</h1> 
    <p>hello world </p> 

    </div> 
    <div id="relevant-links"> 
    <p>Hello World</p> 
    </div> 

    <!-- Page Content --> 
</body>

Und die CSS

#body { 
    background-color: #355e72; 
    color: #231F20; 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 

#background { 
    background-image: url(../Images/IncitementStudio-Logo-Color.png); 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-left: 80%; 
    padding-bottom: 48%; 
    position: absolute; 
    display: block; 
} 

#NavigationMenu { 
    padding-bottom: 25%; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    padding-left: 35%; 
    padding-top: 16%; 
    font-size: 2.5vw; 
    position: absolute; 
} 

#float { 
    text-align: center; 
    color: gray; 
    padding-top: 9%; 
    margin-top: -10%; 
    padding-bottom: 100%; 
    margin-left: 85%; 
    list-style-type: none; 
    width: 15%; 
    background-color: #203A46; 
    position: fixed; 
    z-index: 999; 
} 

#float strong { 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    font-size: 3vw; 
} 

#float div div { 
    border: solid gray; 
    border-top: 0px; 
    border-left: 0px; 
    border-right: 0px; 
    padding: 10% 10% 10% 10% 
} 

#content-main { 
    position: absolute; 
    top: 80%; 
    background-color: #2B4F60; 
    width: 100%; 
    display: block; 
    margin: -1%; 
    padding-left: 2.5%; 
    padding-bottom: 1vh; 
} 

#content-main h1 { 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
} 

#content-main p { 
    width: 80%; 
} 

#footer p { 
    color: gray; 
} 

#relevant-links { 
    position: absolute; 
    background-color: #203A46; 
    display: block; 
    flex-flow: column; 
    margin-left: -1%; 
    padding-left: 2%; 
    top: 100%; 
    width: 86%; 
    height: auto; 
} 

#relevant-links p { 
    width: 80%; 
}

ich eine Kopie meiner HTML/CSS auf Jsfiddle setzen, aber auch: https://jsfiddle.net/Ld3jp7g3/1/

In Dreamweaver, die Live-Ansicht scheint, dass der Körper zu zeigen nur über ein Fünftel der Seite erstreckt. Könnte das ein Teil des Problems sein? Warum passiert das und wie repariere ich das?

Quelle

2017-03-01 dnallohleoj

Willkommen bei StackOverflow! Sie verwenden eine Menge prozentualer Füllungen und Ränder, was erklärt, warum Sie div-Überlappungen erhalten. Sie verwenden auch 'position: absolute' und' position: fixed' zu fast allem, was das Arbeiten mit einer responsiven Website sehr schwierig macht. Ich würde empfehlen, ein Framework wie Bootstrap oder Foundation zu verwenden, um zu lernen, wie Elemente auf der Seite positioniert werden sollten. Im Wesentlichen sollte Ihre Seitenleiste eine einzelne Spalte sein, und der Rest Ihres Inhalts sollte in einer anderen, größeren Spalte sein :) –

-1

Ich sehe ein paar unmittelbare Probleme mit Ihrem Code.

Zunächst einmal: Sie haben eine Menge prozentuale Ränder und Paddings. Beachten Sie, dass der Prozentsatz relativ zum Container ist.

Zweitens:

position: absolute

und

position: fixed

und

display: block

sind in der Regel schlechte Ideen, wenn sie mit Flexbox arbeiten. Wenn Sie mit Flex arbeiten, verfügt es über eigene Versionen dieser Eigenschaften für Flex-Elemente. Überprüfen Sie this site für Hilfe mit Flex. Ich benutze es die ganze Zeit, und es ist eine gute Referenz.

Hoffe, dass hilft!

Quelle

2017-03-02 00:50:41

Wie verhindert man vertikale Überlappung von divs

Antwort

Verwandte Themen