Overflow-y : visible ; en CSS, la solution ne fonctionne pas

Le contenu de cet article concerne la solution à overflow-y: visible; ne fonctionne pas en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Scénario

Une exigence récente concerne une page h5 du côté mobile. Elle nécessite une rangée de cartes sélectionnables. La partie au-delà du conteneur peut être glissée vers la gauche et la droite en même temps. , il doit y avoir un bouton de suppression dans le coin supérieur gauche de chaque bouton de carte. Comme indiqué ci-dessous :

J'ai pensé : si simple, ajoutez une largeur maximale : 200 px white-space : nowrap- sur le parent ; conteneur x : auto ; La démo est la suivante :

<div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>

.container {
  max-width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}

.son {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  margin-right: 20px;
}

.delete_btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  transform: translateX(-50%) translateY(-50%);
}

Je pensais que tout s'était bien passé, mais le résultat est le suivant :

Regardez le coin supérieur gauche du rectangle. Le carré rouge, qui mesurait initialement 20*20, est partiellement masqué. Je pensais que cela était dû à un débordement, alors j'ai essayé d'utiliser overflow-y: visible; pour le résoudre, mais cela n'a pas fonctionné. Les amis prudents doivent se rappeler que la valeur par défaut du débordement est visible. Alors quelle en est la raison ?

Pourquoi

Après une longue recherche, je comprends à peu près que la raison est la suivante

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

La signification générale est que lorsque overflow-x est scroll ou auto, overflow-y est défini sur auto et vice versa. C'est très embarrassant, alors comment résoudre ce problème.

ps : Le paragraphe ci-dessus provient du document w3c, mais je cherche depuis longtemps et je ne trouve pas le texte original. Si vous le trouvez, veuillez laisser un lien ~ [Manual Dog Head].

Comment

Après tout, je veux toujours que le carré rouge dans le coin supérieur gauche soit affiché complètement. Alors, quelle est la solution ? Ce que j'utilise ici, c'est d'ajouter le style suivant à <.>container

padding-top: 20px;
margin-top: -20px;

Le principe est en fait assez simple, après avoir ajouté padding-top: 20px;, le carré rouge positionné de manière absolue aura de l'espace pour s'afficher sans dépasser le volume du conteneur, puis utiliser margin-top : -20px ; pour compenser le changement de position. Comme le montre la figure

ps : La partie recouverte du côté gauche du premier carré rouge. est résolu avec la même idée, c'est-à-dire via padding-left et margin-left.

Recommandations associées :

solution iframe à double barre de défilement CSS3 overflow-y attribut_html/css_WEB-ITnose

Débordement de balise HTML traitement application_HTML/Xhtml_Production de pages Web

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!