Mettre un élément en avant à l'aide de CSS

Question

Mettre un élément en avant à l'aide de CSS

Demandé el 3 de Avril, 2013: Quand la question a-t-elle été
548560 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'arrive pas à comprendre comment mettre les images en avant en utilisant CSS . J'ai déjà essayé de régler le z-index sur 1000 et la position sur relative, mais ça ne marche toujours pas.

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>

Demandé el 3 de Avril, 2013 par Stylock

Answer 1

4 Réponses

Answer 2

163voto

Sowmya Points 13098

Ajouter z-index:-1 y 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>

Répondu el 3 de Avril, 2013 par Sowmya (13098 Points )

Answer 3

52voto

Soon Khai Points 544

Note : z-index ne fonctionne que sur les éléments positionnés ( position:absolute , position:relative ou position:fixed ). Utilisez l'un d'entre eux.

Répondu el 26 de Juin, 2015 par Soon Khai (544 Points )

Answer 4

8voto

Javobal Points 121

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

Répondu el 9 de Juillet, 2015 par Javobal (121 Points )

Answer 5

7voto

ntgCleaner Points 2857

Autre remarque : l'indice z doit être pris en compte lorsque l'on considère les objets enfants par rapport aux 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__child un z-index de 99 et vous avez donné branch_2__child un z-index de 1, mais vous avez également donné à votre branch_2 un z-index de 10 et votre branch_1 un z-index de 1 , votre branch_1__child ne s'affichera toujours pas devant votre branch_2__child

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

Le z-index est relatif à ses conteneurs. Un z-index placé sur un conteneur situé plus haut dans la hiérarchie crée une nouvelle "couche".

Incep[inception]tion

Voici un violon pour jouer avec :

https://jsfiddle.net/orkLx6o8/

Répondu el 12 de Janvier, 2017 par ntgCleaner (2857 Points )

Mettre un élément en avant à l'aide de CSS

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Mettre un élément en avant à l'aide de CSS

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: