Se débarrasser de la barre de défilement pour la position: absolue à l'intérieur de la position: relative à l'intérieur du débordement: auto

Hé les gars, ma première question ici sur le débordement de la pile. J'essaie d'obtenir quelque chose de très simple à travailler, je suis sûr qu'il me manque quelque chose d'assez évident. Encore en train de s'habituer au css "standard", trop d'années à travailler avec des culs non fonctionnels! Il h.Se débarrasser de la barre de défilement pour la position: absolue à l'intérieur de la position: relative à l'intérieur du débordement: auto

Ainsi, l'échantillon de ce que je fais:

<div style="overflow: auto; border: 1px solid"> 
    hello 
    <div style="position: relative; z-index: 99999; top: 0px; left: 0px;"> 
     <div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0"> 
      <ul> 
       <li >New</li> 
       <li >Old</li> 
      </ul> 
     </div> 
    </div> 
</div>

En substance: Le premier div est un conteneur, que je voudrais déborder automatiquement lorsque le contenu est ajouté. À l'intérieur de ce conteneur, j'ai un menu contextuel, que j'ai simplifié ici. Le menu contextuel apparaît (comme il se doit) directement sous "bonjour". Mon problème, cependant, est qu'au lieu du menu contextuel "coming out" du parent, comme le voudrait la position absolue, il provoque en réalité l'apparition d'une barre de défilement sur le parent.

Je sais que si je prends otu la "position: relative" ça marche, mais alors elle ne s'affole plus où je le veux (directement sous l'élément précédent).

Qu'est-ce qui me manque ici?

EDIT: Exemple ici: http://marcos.metx.net/OverflowTest.htm

Source

2009-07-19 Anonymous

pouvez-vous s'il vous plaît mais un html en direct avec l'exemple css afin que nous puissions vous comprendre plus –

avant tout - style inline est un grand non non.

Il est préférable d'inclure une feuille de style et de l'appliquer à des div individuels via les attributs "id" ou "class".

S'il vous plaît lire sur des normes conformes à css w3schools

Le problème est votre propriété de débordement.

auto - « Si le débordement est clipsé, une barre de défilement doit être ajouté pour voir le reste du contenu »

Ce que vous cherchez est « overflow: visible; »

Source

2010-01-28 15:56:28

Le 'overflow: auto' est nécessaire ici. Je pense que ce que veut l'auteur original est d'avoir des barres de défilement, mais ne veut pas que la position «div: absolute» soit retirée du flux parce qu'elle a une 'position: absolute'. Et en fait, c'est ce qui arriverait si le conteneur n'avait pas de «position: relative». – avernet

Je recommande fortement le didacticiel CSS MDN sur w3schools. https://developer.mozilla.org/en-US/docs/CSS/Getting_Started –

En utilisant position: absolute au lieu de relative sur ce div moyen résoudra votre problème. Cela vous donne (avec une couleur de la bordure ajoutée sur la partie intérieure le plus div):

alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png

Et voici le code source mis à jour:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    </head> 
    <body> 
     <div style="overflow: auto; border: 1px solid"> 
      hello 
      <div style="position: absolute; z-index: 99999"> 
       <div style="z-index: 99999; overflow-y: hidden; position: absolute; 
         overflow: hidden; height: 200px; left: 0; auto: 0; 
         border: 1px solid red"> 
        <ul> 
         <li >New</li> 
         <li >Old</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Pour en savoir plus, voir Absolutely positioned box inside a box with overflow: auto or hidden.

Source

2010-02-11 18:45:19 avernet

Se débarrasser de la barre de défilement pour la position: absolue à l'intérieur de la position: relative à l'intérieur du débordement: auto

Répondre

Questions connexes