N'utilisez pas CSS position : absolue pour superposer deux éléments

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!