Bringen Sie das Element mit CSS nach vorne

86

Ich kann nicht herausfinden, wie ich Bilder mit nach vorne bringen kann CSS. Ich habe bereits versucht, den Z-Index auf 1000 und die Position auf Relativ zu setzen, aber es schlägt immer noch fehl.

Hier ist ein Beispiel:

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}
<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>
Erweitern Sie das Snippet

html css z-index jsfiddle Stylock
quelle
Was nach vorne bringen? Auch das <col> ist veraltet .
Vucko
Bringen Sie die Bilder nach vorne.
Stylock
Warum verwenden Sie verschachtelte Tabellen, um ein Menü zu erstellen?
Blender
2
Ich hatte Probleme mit dem Menü in IE8 und verschachtelte Tabellen haben es behoben.
Stylock
Dieses Video ist äußerst hilfreich, um zu verstehen, wie es funktioniert.
J0ANMM

Antworten:

133

Hinzufügen z-index:-1und position:relativezu .content

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
    z-index: -1;
    position:relative;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}
<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>
Erweitern Sie das Snippet

Sowmya
quelle
2
Ihre Lösung hat perfekt funktioniert. Können Sie bitte erklären, warum dies funktioniert?
Germstorm
1
@Germstorm Z-indexsteuert, wie Bilder oder Divs übereinander gestapelt werden. Div / Bild mit höherem Z-Index-Wert nimmt den vorderen Platz ein und niedriger würde zurückbleiben.
Sowmya
Ich erinnere mich nicht wirklich genau an die Umstände meiner Frage, aber mein Problem war, dass ich verstand, was z-indextut, aber es funktionierte immer noch nicht. Was ich aus dieser Antwort gelernt habe, ist, dass z-indexSie bei Ihnen auch die übergeordnete Hierarchie berücksichtigen müssen.
Germstorm
2
@Germstorm Letzte Antwort von Soon Khai ist die richtige Erklärung: Z-Index hat keine Auswirkung, wenn das Element nicht positioniert ist
FelipeAls
2
@SpiderMan Woher hast du das +1? Das ist nicht gültig.
Sjagr
6

In meinem Fall musste ich den HTML-Code des gewünschten Elements am Ende der HTML-Datei nach vorne verschieben, da es nicht funktioniert, wenn ein Element einen Z-Index hat und das andere keinen Z-Index.

Javobal
quelle
Die 2 Teile Ihrer Antwort hängen nicht zusammen (zumindest ohne weitere Details). Der erste Teil ist eine Lösung, da alle anderen Eigenschaften, die dem letzteren Element im HTML-Code entsprechen, über den vorherigen angezeigt werden. Der zweite Teil enthält einige Kommentare dazu, wie sich der Z-Index auswirkt.
FelipeAls
1
Ein guter Punkt für alle Elemente muss ein Z-Index sein, damit es funktioniert. Vielen Dank!
Salah Saleh
2

Ein weiterer Hinweis: Der Z-Index muss berücksichtigt werden, wenn untergeordnete Objekte relativ zu anderen Objekten betrachtet werden.

Beispielsweise

<div class="container">
    <div class="branch_1">
        <div class="branch_1__child"></div>
    </div>
    <div class="branch_2">
        <div class="branch_2__child"></div>
    </div>
</div>

Wenn Sie branch_1__childeinen Z-Index von 99und branch_2__childeinen Z-Index von 1 angegeben haben, aber auch branch_2einen Z-Index von 10und branch_1einen Z-Index von angegeben haben 1, wird Ihr branch_1__childStandbild immer noch nicht vor Ihrem angezeigtbranch_2__child

Wie auch immer, ich versuche zu sagen; Wenn ein übergeordnetes Element eines Elements, vor das Sie gestellt werden möchten, einen niedrigeren Z-Index als sein Relativ hat, wird dieses Element nicht höher platziert.

Der Z-Index ist relativ zu seinen Containern. Ein Z-Index, der auf einem Container weiter oben in der Hierarchie platziert wird, startet im Grunde eine neue "Ebene".

Incep [Inception] tion

Hier ist eine Geige zum Herumspielen:

https://jsfiddle.net/orkLx6o8/

ntgCleaner
quelle