it-swarm.com.de

Wie kann man verhindern, dass fest positionierte Elemente andere Elemente in CSS überlappen?

Angenommen, ich habe drei Divs:

<div id="outer"></div>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

#one {
  position:fixed;
  top:0px;
  left:0px;
}

#two {
  width: 80%;
  height:500px;
}

#three {
  width: 80%;
  height:500px;
}

Die Divisionen "zwei" und "drei" scheinen aufgrund der festgelegten Position von Divisionen "eins" überlappt zu sein.

1) Wie kann man es am besten so gestalten, dass sie sich nicht überlappen?

2) Wie kann ich es am besten so einstellen, dass mein festes Div 100% der Höhe einnimmt, auch wenn der Benutzer einen Bildlauf nach unten ausführt? (Wie eine Sidebar, die verhindert, dass neue Divs auf derselben Seite wie die Divs zwei und drei ausgeführt werden.) Enthält der beste Weg Floats für #two und #three?

30
Rolando

1:

Indem Sie margin-left Hinzufügen, können Sie sicherstellen, dass lange feste Divs die anderen nicht überlappen.

#two, #three {
    margin-left:20%;
    width:80%;
    height:500px;
}

2:

Durch Hinzufügen von bottom:0px; Wird die Höhe des Fensters festgelegt, da es von oben nach unten erweitert wird.

#one {    
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;   
    width:20%; 
}

Hinweis: Ich habe dem Div #one Auch eine flexible Breite von 20% hinzugefügt, damit es gut mit den anderen beiden Divs mit flexibler Breite zusammenarbeitet .

Geige: http://jsfiddle.net/ZPRLd/

10
iambriansreed

Durch Ändern der Position von position: fixed; bis position: sticky; mein problem gelöst.

#one{
 position: sticky;    
}

Sie können die CSS-Eigenschaft z-index verwenden. Es hat gut funktioniert bei mir!

#one{
  z-index:0
}
#two, #three{
  z-index: 1;
}

Da der z-Index von #two und #three sind höher als #one, sie werden oben sein, wenn es eine Überlappung gibt. Sie können andere ganzzahlige Werte auswählen, solange ein Index höher als ein anderer ist.

enter image description here