Placer l'élément à l'avant à l'aide de CSS
Je ne peux pas comprendre comment les images de l'avant à l'aide de CSS
. J'ai déjà essayé de réglage z-index pour 1000 et la position relative, mais il ne fonctionne toujours pas.
Ici l'exemple de l'-
CSS:
#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;
}
HTML:
<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>
- Quoi mettre de l'avant ? Aussi le <col> est une deprecated.
- Apporter les images vers l'avant.
- Pourquoi êtes-vous à l'aide de tables imbriquées pour faire un menu?
- J'ai eu des problèmes avec le menu dans IE8 et des tables imbriquées, il fixe.
- Cette vidéo est extrêmement utile pour comprendre comment il fonctionne.
Vous devez vous connecter pour publier un commentaire.
Ajouter
z-index:-1
etposition:relative
pour .contenuCSS:
HTML:
z-index
fait, mais encore il n'a pas de travail. Ce que j'ai appris de cette réponse, c'est qu'avecz-index
vous devez prendre en considération la hiérarchie parent ainsi.+1
? Ce n'est pas valide.Remarque: z-index ne fonctionne que sur les éléments en position (
position:absolute
,position:relative
, ouposition:fixed
). Utiliser l'un de ces.Dans mon cas, j'ai dû passer le code html de l'élément que je voulais, à l'avant, à la fin du fichier html, parce que si un élément de a z-index et les autres n'ont pas de z index, il ne fonctionne pas.
Une autre Remarque: z-index doit être considéré lors de la recherche des enfants des objets par rapport à d'autres objets.
Par exemple
Si vous avez donné
branch_1__child
un z-index de99
et vous a donnébranch_2__child
un z-index de 1, mais vous avez également donné votrebranch_2
un z-index de10
et votrebranch_1
un z-index de1
, votrebranch_1__child
encore ne sera pas en face de votrebranch_2__child
De toute façon, ce que j'essaie de dire, c'est; si un parent d'un élément que vous souhaitez être placé en face est faible, le z-index de son parent, cet élément ne sera pas placé plus haut.
Le z-index est par rapport à ses conteneurs. Un z-index placé sur un récipient plus haut dans la hiérarchie commence en fait à une nouvelle "couche"
Incep[création]tion
Ici un violon pour jouer:
https://jsfiddle.net/orkLx6o8/