Mettre l'élément au premier plan en utilisant CSS

87

Je ne peux pas comprendre comment apporter des images à l' avant à l' aide CSS. J'ai déjà essayé de définir le z-index sur 1000 et la position sur relative, mais cela échoue toujours.

Voici un exemple-

#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>
Développer l'extrait

html css z-index jsfiddle Stylock
la source
Apportez quoi à l'avant? De plus, <col> est obsolète .
Vucko
Mettez les images au premier plan.
Stylock
Pourquoi utilisez-vous des tableaux imbriqués pour créer un menu?
Blender
2
J'ai eu des problèmes avec le menu dans IE8 et les tables imbriquées l'ont corrigé.
Stylock
Cette vidéo est extrêmement utile pour comprendre son fonctionnement.
J0ANMM

Réponses:

135

Ajouter z-index:-1et position:relativeà .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>
Développer l'extrait

Sowmya
la source
2
Votre solution a parfaitement fonctionné. Pouvez-vous expliquer pourquoi cela fonctionne?
Germstorm
1
@Germstorm Z-indexcontrôle la façon dont les images ou les div se superposent . Une div / image avec une valeur d'index z plus élevée prend la place avant et une image inférieure resterait derrière.
Sowmya
Je ne me souviens pas vraiment des circonstances de ma question, mais mon problème était que je comprenais ce qui z-indexfonctionnait, mais cela ne fonctionnait toujours pas. Ce que j'ai appris de cette réponse, c'est que z-indexvous devez également prendre en considération la hiérarchie des parents.
Germstorm
2
@Germstorm La réponse récente de Soon Khai est l'explication correcte: le z-index n'a aucun effet si l'élément n'est pas positionné
FelipeAls
2
@SpiderMan Où avez-vous trouvé +1? Ce n'est pas valable.
sjagr
6

Dans mon cas, j'ai dû déplacer le code html de l'élément que je voulais à l'avant à la fin du fichier html, car si un élément a un z-index et l'autre pas un z index, cela ne fonctionne pas.

Javobal
la source
Les 2 parties de votre réponse ne sont pas liées (du moins sans autres détails). La première partie est une solution car toutes les autres propriétés égales au dernier élément du code HTML sont affichées au-dessus des précédents. La deuxième partie est un commentaire sur la façon dont le z-index a un effet.
FelipeAls
1
bon point sur tous les éléments doivent avoir z-index pour que cela fonctionne. Merci!
Salah Saleh
3

Autre Remarque: le z-index doit être pris en compte lors de l'examen des objets enfants par rapport à d'autres objets.

Par exemple

<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>

Si vous avez donné branch_1__childun z-index de 99et vous avez donné branch_2__childun z-index de 1, mais vous avez également donné votre branch_2z-index de 10et votre branch_1z-index de 1, votre branch_1__childtoujours n'apparaîtra pas devant votrebranch_2__child

Quoi qu'il en soit, ce que j'essaie de dire, c'est; si un parent d'un élément que vous souhaitez placer devant a un z-index inférieur à son relatif, cet élément ne sera pas placé plus haut.

Le z-index est relatif à ses conteneurs. Un z-index placé sur un conteneur plus haut dans la hiérarchie commence essentiellement une nouvelle «couche»

Incep [création] tion

Voici un violon à jouer:

https://jsfiddle.net/orkLx6o8/

ntgCleaner
la source