Frage Z-Index funktioniert nicht wie erwartet mit Bild und Hintergrund-Div


Ich habe ein Bild, und ich möchte einen Effekt auf meiner Seite haben, wo ein Hintergrund-div mit grauer Farbe 5px auf der linken Seite und der Unterseite des Bildes angezeigt wird. Aber aus irgendeinem Grund kann ich das Hintergrund-Div nicht hinter dem Bild ausrichten. Es liegt immer oben. Wie kann ich das beheben?

JFiddle: http://jsfiddle.net/3Z7m4/2/


11
2017-11-15 12:56


Ursprung


Antworten:


Hinzufügen position: relative; in die img CSS.

Sehen: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Hinweis: Der Z-Index funktioniert nur bei positionierten Elementen (Position: absolut,   Position: relativ oder Position: fixiert).


30
2017-11-15 13:05



Probiere es einfach,

.container .gray {
    width: 420px;
    height: 315px;
    position: absolute;
    margin-left: 5px;
    margin-top: -315px;
    z-index: -10;
    background-color: gray;
}

2
2017-11-15 13:00