Maison >interface Web >tutoriel CSS >Comment faire en sorte que des balises spécifiques ignorent le débordement : caché dans les divisions HTML ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-11-04 00:41:311056parcourir

How to Make Specific Tags Ignore Overflow:hidden in HTML Divs?

Comment autoriser une balise spécifique à remplacer le débordement : caché

Lorsque vous travaillez avec des div HTML, la spécification d'une propriété de débordement masquée peut empêcher certains éléments de déborder des limites du div. Cependant, certains cas peuvent nécessiter que certains éléments ignorent cela et dépassent à l'extérieur du div.

Solution :

La clé réside dans le maintien d'un positionnement statique pour le overflow:hidden élément et définir la position de l'élément débordant par rapport à un parent de niveau supérieur, comme illustré ci-dessous :

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

Explication :

  • Le .relative -wrap classe avec position: relative permet le placement de l'élément interne par rapport à sa position dans le DOM.
  • La classe .overflow-wrap maintient overflow:hidden, ainsi qu'une hauteur et une largeur spécifiques pour définir la limite. zone.
  • La classe .respect-overflow, avec position : relative, adhère aux limites fixées par le parent .overflow-wrap.
  • La classe .no-overflow, avec position : absolue , ne tient pas compte des limites du parent .overflow-wrap et se positionne par rapport au parent .relative-wrap.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn