web-dev-qa-db-fra.com

CSS overflow-y: visible, overflow-x: défilement

J'ai vu quelques questions comme celle-ci dans ma recherche, mais soit la question n'a pas été répondue correctement, soit aucune réponse n'a été donnée. Alors, je vais demander à nouveau.

<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>

  <div class="parent">
  <!-- Lots of the following divs -->
  <div class="child">
    Text Line
    <div class="child-menu">some pop out stuff</div>
  </div>
</div>

D'accord, ce n'est qu'un exemple. Mais en gros, ce que j'essaie d'accomplir, c'est que les classes .child puissent défiler sur l'axe y ... défiler de haut en bas. Mais je veux que l'axe des x ... le menu enfant soit visible à l'extérieur du conteneur .parent.

Cela a-t-il du sens? Donc, ce qui se passe, c'est que lorsque la page s'affiche, le navigateur interprète le débordement comme complètement automatique et ne respecte pas l'axe séparé. Suis-je en train de faire quelque chose de mal ou les navigateurs ne sont-ils pas encore conformes aux spécifications CSS3? Surtout testé uniquement sur Chrome. enter image description here

cssoverflow
38
Senica Gonzalez

Je l'ai compris!

Le parent doit être en débordement: auto; L'enfant doit être position: relative; Le menu .child doit être position: fixed; avec PAS positionnement en haut ou à gauche. Si vous faites cela, il le gardera en ligne avec le contenu.

Si vous devez déplacer le menu enfant, utilisez des marges et non en haut ou à gauche. Exemple marge gauche: -100px;

MODIFIER

Comme il semble que les gens l'utilisent toujours, veuillez noter que vous devrez utiliser javascript pour déplacer les éléments fixes au fur et à mesure que la page défile.

31
Senica Gonzalez

Il a résolu ici! Ils utilisent css et JS.

.child:hover .child-menu { display: block; }

 .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px  }
    .child { position:static; }
    .child-menu { position:absolute; display:inline-block; display: none; }

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/

2
blondo