Maison > interface Web > tutoriel CSS > Pourquoi « overflow : hidden » ne fonctionne-t-il pas sur les éléments parents et enfants à position fixe ?

Pourquoi « overflow : hidden » ne fonctionne-t-il pas sur les éléments parents et enfants à position fixe ?

Barbara Streisand
Libérer: 2024-12-04 18:24:11
original
242 Les gens l'ont consulté

Why Doesn't `overflow: hidden` Work on Fixed Positioned Parent and Child Elements?

Débordement : caché ne fonctionne pas sur l'élément parent/enfant fixe

Question :

Pourquoi le débordement ne : fonction de propriété cachée sur parent/enfant fixe éléments ?

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;
}
Copier après la connexion
<div class="parent">
  <div class="children"></div>
</div>
Copier après la connexion

Réponse :

Clip CSS : rect() peut couper un élément positionné fixe à son parent. Cependant, il comporte quelques mises en garde :

  • La position du parent ne peut pas être statique ou relative.
  • Les pourcentages ne sont pas pris en charge pour les coordonnées rect (bien que auto soit équivalent à 100 %).
  • Les éléments enfants peuvent avoir des options de positionnement et de transformation CSS3 limitées.

Voir la mise à jour Démo JSFiddle pour un exemple d'utilisation de clip : rect().

Notes supplémentaires :

  • Utiliser la visibilité arrière : cachée sur les éléments enfants pour une meilleure prise en charge dans Chrome.
  • La prise en charge des anciens navigateurs et des navigateurs mobiles peut être limitée.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal