Bootstrap-Affix-Menü, wenn der Inhalt undurchsichtig ist

Question

Ein seltsames Problem mit einer angehängten Navbar. Ich habe ein Div als Container-Flüssigkeit unterhalb der Navbar und alle Inhalte, die ich dort reinsetze scrollt völlig in Ordnung mit der Navbar an Ort und Stelle, bis ich versuche, eine Opazität auf Divs in diesem Container zu setzen.

Wenn ich die Deckkraft einstellen, überlappt der Inhalt die Navigationsleiste.

Sehen Sie diese zwei Beispiele für das, was ich spreche:

Keine Opazität auf dem div

http://25years.cwhc-rcsf.ca/example1.php

Mit Opazität auf dem div

http://25years.cwhc-rcsf.ca/example2.php

die einzige Unterschied im Code zwischen den zwei Behältern ist wie folgt:

div.box, div.box2 { 
    margin:15px 0px 15px 0px; 
    padding:25px; 
    background-color:#fff; 
    border-radius: 5px; 
    border:#fff 1px solid; 
} 
div.box2 { 
    opacity:.85; 
} 

Answer 1

Das ist die z-index Ausgabe

den folgenden CSS-Stil hinzufügen, das Problem beheben:

CSS:

div#menu { 
    position: relative; 
    z-index: 1; 
}