Comment autoriser les éléments à déborder d'un conteneur avec « overflow : caché » ?

Contrôle de débordement de conteneur pour des éléments spécifiques

Vous pouvez rencontrer des situations dans lesquelles vous disposez d'un conteneur avec des dimensions de hauteur et de largeur spécifiques et un débordement : caché pour masquer tous les éléments qui dépassent ses limites. Cependant, vous pouvez également souhaiter autoriser certains éléments du conteneur à s'étendre au-delà de ces limites.

Pour y parvenir, utilisez l'approche consistant à conserver l'élément overflow:hidden avec position:static et à positionner l'élément débordant par rapport à un parent supérieur (plutôt que le parent overflow:hidden) s'avère efficace. Par exemple :

<code class="css">.relative-wrap {
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}

.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}</code>

<code class="html"><div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow"></div>
        <div class="no-overflow"></div>
    </div>
</div></code>

Dans cet exemple, le div .relative-wrap sert de parent supérieur avec la position : relative. Dans .relative-wrap, le div .overflow-wrap (avec overflow:hidden) est positionné avec position:static. Les éléments débordants (dans ce cas, .respect-overflow et .no-overflow) sont ensuite positionnés par rapport à .relative-wrap (leur élément grand-parent) en utilisant position: relative pour .respect-overflow (qui respecte les limites de .overflow- wrap) et position : absolue pour .no-overflow (qui peut s'étendre au-delà des limites du conteneur).

Cette approche vous permet effectivement d'avoir des éléments dans un conteneur avec overflow:hidden qui peuvent dépasser au-delà de ses limites, donnant vous une plus grande flexibilité dans votre mise en page et votre conception.

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!