Ik weet niet hoe ik afbeeldingen naar voren kan halen met CSS. Ik heb al geprobeerd z-index in te stellen op 1000 en positie op relatief, maar het lukt nog steeds niet.
Hier is een voorbeeld-
#header {
background: url(https://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(https://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>Antwoord 1, autoriteit 100%
Voeg z-index:-1 en position:relative toe aan .content
#header {
background: url(https://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(https://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>Antwoord 2, autoriteit 31%
Opmerking: z-index werkt alleen op gepositioneerde elementen (position:absolute, position:relative of position:fixed). Gebruik een van deze.
Antwoord 3, autoriteit 5%
In mijn geval moest ik de html-code van het element dat ik wilde naar voren verplaatsen aan het einde van het html-bestand, omdat als het ene element een z-index heeft en het andere geen z-index, dat niet het geval is werk.
Antwoord 4, autoriteit 3%
Nog een opmerking: er moet rekening worden gehouden met de z-index bij het bekijken van onderliggende objecten ten opzichte van andere objecten.
Bijvoorbeeld
<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>
Als je branch_1__child een z-index van 99 hebt gegeven en je branch_2__child een z-index van 1, maar je hebt ook je branch_2 een z-index van 10 en uw branch_1 een z-index van 1, uw branch_1__child verschijnt nog steeds niet voor uw branch_2__child
Hoe dan ook, wat ik probeer te zeggen is; als een ouder van een element dat u vooraan wilt plaatsen een lagere z-index heeft dan zijn relatieve, zal dat element niet hoger worden geplaatst.
De z-index is relatief ten opzichte van de containers. Een z-index die op een container hoger in de hiërarchie wordt geplaatst, begint in feite een nieuwe “laag”
Incep[inception]tion
Hier is een viool om mee te spelen: