Pourquoi « overflow : hidden » ne fonctionne-t-il pas sur les éléments parent/enfant à position fixe dans CSS ?

Overflow:hidden Inefficace sur les éléments parent/enfant positionnés : un problème ou par conception ?

En CSS, la propriété overflow:hidden se cache contenu qui s’étend au-delà des limites de son élément conteneur. Cependant, un comportement inattendu se produit lorsque vous tentez d'utiliser cette propriété sur un élément positionné comme fixe, avec des éléments enfants fixes. La troncature de débordement attendue ne se produit pas.

Exemple :

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
}
.children {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: #333;
}

Explication :

Ce problème provient d'un limitation en CSS : overflow:hidden masque uniquement efficacement le contenu dans le flux d'un élément. Les éléments positionnés, comme avec position:fixed, sont supprimés du flux normal et ne participent pas à la gestion du débordement.

Solution alternative : propriété CSS Clip

À Pour obtenir le comportement de détourage de débordement souhaité sur les éléments positionnés, pensez à utiliser la propriété clip. Il permet de définir des zones rectangulaires au sein d'un élément qui sont visibles ou masquées.

Exemple :

.parent {
  position: fixed;
  clip: rect(0px, 300px, 300px, 0px);
  width: 300px;
  height: 300px;
  background: #555;
}

Précautions :

• La position de l'élément parent ne peut pas être statique ou relative.
• Les coordonnées du rect ne prennent pas en charge pourcentages (sauf pour « auto »).
• Les éléments enfants peuvent avoir des limitations de positionnement dans certains navigateurs, tels que IE et Chrome.

Considérations supplémentaires :

• Ajouter une visibilité arrière : caché ; pour améliorer la gestion du positionnement des éléments enfants et des transformations CSS3.
• Les navigateurs mobiles et les anciennes versions peuvent avoir une prise en charge limitée de la propriété clip.

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!