Supposons que vous disposiez de la structure HTML suivante pour superposer une image avec un en-tête :
<div> <p>You could be tempted to position the header absolute:<br> </p> <pre class="brush:php;toolbar:false">.card { position: relative; width: 300px; } .card > * { margin: 0; } .card header { position: absolute; width: 100%; height: 100%; background-color: #fff3; }
... mais ensuite vous perdez la mise en page sur l'en-tête. Utilisez plutôt la grille :
.card { display: grid; width: 300px; } .card > * { grid-area: 1/1; margin: 0; } .card header { background-color: #fff3; }
Voici un lien codepen avec l'exemple complet.
Bon codage !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!