Comment faire en sorte que des balises spécifiques ignorent le débordement : caché ?

Comment autoriser des balises spécifiques à remplacer le débordement : caché

Lorsque vous travaillez avec des éléments dans un conteneur, vous pouvez rencontrer des situations dans lesquelles vous souhaitez que certains éléments pour sortir des limites du conteneur, remplaçant essentiellement la propriété overflow:hidden. Voici comment y parvenir avec HTML et CSS.

Pour permettre à une balise spécifique d'ignorer la règle overflow:hidden, vous devez positionner l'élément débordant à l'aide d'un élément parent différent. Le conteneur avec overflow:hidden doit avoir une position:static, tandis que l'élément débordant est positionné par rapport à un parent supérieur. Cette configuration permet à l'élément débordant d'échapper aux limites de son parent sans affecter les autres éléments du conteneur.

Considérez le code HTML et CSS suivant :

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

<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>

Dans cet exemple , le div .overflow-wrap a une hauteur et une largeur de 250 px et overflow:hidden, ce qui signifie que tout contenu dépassant de ses limites sera masqué. Cependant, le div .no-overflow, qui est positionné de manière absolue, peut s'étendre au-delà du div .overflow-wrap car son positionnement est référencé au div .relative-wrap, qui a une position : relative. Le div .respect-overflow, quant à lui, qui est positionné par rapport au div .overflow-wrap, respecte la règle overflow:hidden et est contenu dans ses limites.

En utilisant cette technique, vous pouvez créer des éléments qui apparaissent pour sortir d'un conteneur sans affecter les propriétés de positionnement et de débordement des autres éléments de ce conteneur.

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!