negativen z-index verschwindet unter hintergrund

Ich versuche zu implementieren ist ein div, das aussieht wie eine hohe und schmale Seite, wie ein notebook-Papier.

Habe ich meine Inhalte in <div id='centerframe'/> und ich dachte, dass eine gute Lösung war die Verwendung eines absolut positionierten div-Tag für das "Papier".

Also schrieb ich die css-Regeln wie folgt:

div#center_background
{
    z-index:-1;
    position:absolute;
    top:0;
    left:130px;
    width:900px;
    height:100%;
    background:rgba(255,255,255,0.9);
}

Allerdings, wenn ich ein Hintergrundbild hinzufügen, um Körper, es verschwindet unter dem hintergrund. Ich habe versucht, eine positive z-index, als es rendert auf der Oberseite der alles, was in der Seite, wie centerframe, topbar etc. Siehe Bild:

negativen z-index verschwindet unter hintergrund

Eine Lösung könnte sein, die Einstellung der z-index für alle Elemente, die ich wirklich nicht wollen, zu tun, da möchte ich position:absolute;'s so wenig wie möglich.

Also, wie kann ich definieren, diese Art von hintergrund-div ohne Veränderung anderer Positionen und z-Indizes?

Machte ich einen fiddle, aber es läuft wie erwartet. Die seltsame Sache in meinem richtigen code, wenn ich laden Sie die Seite, die center_background div erscheint oben der hintergrund, den Körper für einen Blick, dann verschwindet es.
Ich etwas nicht ändern mit JavaScript.

  • nicht das hintergrund-Bild des Körpers immer hinter alles andere - der Körper ist das element unten (abgesehen von html), können Sie bitte post mehr von css und html oder erstellen Sie eine Geige
  • ich hatte erwartet das auch. ok, machen krank, eine Fiedel in ein paar Minuten.
  • Okay , ich sehe , Sie missbrauchen absolute positionsvorrichtung hier. Anstelle der z-index-1 z-index:1 für die Kopf-und z-index:0; für center_bg. Zumindest wird es einen Tipp geben, zu verstehen, wie z-index verwendet werden kann. Cheers
  • so erhöhen alle z-index, so dass Sie alle positiv, das problem zu lösen?
InformationsquelleAutor jeff | 2013-06-14
  1. 1

    Wenn ich sehen Ihr Bild denke ich, dass absolute Positionierung ist nicht erforderlich.
    Könnten Sie behoben für den header, und lassen Hauptinhalt gleitet es unter :

    http://jsfiddle.net/jgYXr/ 

    body {
    background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    line-height:3em;
    background:tomato;
    box-shadow:0 0 1em 0.5em;
    text-align:right;
}
a {
    display:inline-block;
    margin:0 0.5em;
    padding:0 0.25em;
}
main {
    width:80%;
    background:rgba(255, 255, 255, 0.75);
    box-shadow:0 0 1em 0.3em;
    margin:2em auto;
    min-height:800px;
}
    <nav> 
  <a href="#">Nav link</a>
  <a href="#">Nav link</a>
  <a href="#">Nav link</a>
</nav>
<main>
</main>

    Suche für position: fixed und wie die Größe eines Elements im absolut-oder Feste über Koordinaten. Siehe auch einstellen der Höhe 1-element, das hat nur 1 Zeile text.

    • position:fixed für den header ist eine tolle Idee. Aber immer noch nicht mein problem lösen. Noch die center_background ist unter dem hintergrund der Karosserie..
    • wow, sorry, habe ich nicht Lesen Sie Ihren code ein. Ich bewarb mich, dass <main> und es funktioniert Super. und wie hast du den center? können Sie bitte erklären, was "auto" in "margin:2em auto;" funktioniert? Danke !
    • margin: 3em auto; sagt : 1. Wert: wie weit der Abstand von oben und unten muss es bleiben. 2. Wert: Auto, für die " nur horizontale, wird das Gleichgewicht auf jeder Seite denselben Abstand von den Seiten des übergeordneten Containers, wenn er kleiner ist. für die vertikale Spanne, auto wird zu 0 für Wert.
    • oh, ich sehe es. Ich danke Ihnen sehr! Ich bin der Annahme der Antwort als die richtige. Aber vielen Dank an alle !
    InformationsquelleAutor G-Cyr
  2. 1

    Stieß ich auf diese in meinem eigenen code ein paar Tage zurück, und Einstellung, die die Elemente zu position: relative das Problem gelöst.

    • Danke! Aber in meinem Fall, das element enthalten ist Körper, und es didnt Hilfe zu set-position:relavite auf Körper..
    InformationsquelleAutor MassivePenguin
  3. 0

    setzen Sie die z-index-Wert im hohen Bereich 

      div#center_background
    {
    z-index:100;
    position:absolute;
    top:0;
    left:130px;
    width:900px;
    height:100%;
    }
    • aber das bewirkt, dass es erscheinen oben auf alles, was ich nicht will.
    • vielleicht, wenn Sie erzeugt den code, den Sie versuchen, wir woukd sagen, wo es schief geht
    • bitte siehe mein edit.
    • Ya feine Herr Cengiz Frostclaw. Welcher Fehler kam während der Verwendung dieses Skript?
    InformationsquelleAutor manoranjani.a
Schreibe einen Kommentar