Exception au débordement: caché; propriété

Comment est-il possible de faire une exception sur le overflow:hidden; conteneur propriété d'un ensemble d'éléments enfants?

Voici un exemple de scène:

<div style = "overflow:hidden;">
   <p>item</p>
   <p>item</p>
   <p class="special">item that needs to show itself outside the parent borders</p>
</div>

Je dois avoir une raison pourquoi je fais cela :] je suis en train de construire un joli complexe de menu déroulant, dont les éléments sont en expansion au menu de ses frontières. Le menu évidemment clips tout en dehors de ses frontières puisque c'est autour de défilement.

Voici un morceau de code de la question:
http://jsfiddle.net/Birowsky/fNLbP/15/

Décommentez la ligne marquée dans le JavaScript pour le voir la question ci-dessous la spéciale "de l'article".
Vous remarquerez peut-être que le défilement ne fonctionne pas, c'est ok, je pense que c'est le violon question.

source d'informationauteur Birowsky

  1. 3

    Je ne pense pas que vous serez en mesure de trouver une façon de le faire. Même si vous le faites, je vous recommande l'encontre de l'utiliser car il ne sera probablement pas l'avenir ou la croix-navigateur compatible.

    Dans le cas d'un menu, vous êtes probablement mieux de mettre ces éléments en séparer divs. J'avais besoin de voir votre code dans le contexte de recommander une façon particulière de faire les choses, mais la superposition de vos éléments un peu comme ce qui pourrait fonctionner pour vous:

    <div style = "overflow: hidden; width: 200px; height: 100px; margin: 0; padding: 0; background-color: #CCCCCC; z-index: 1;">
   <p>item</p>
   <p>item</p>
</div>
<div style = "overflow: visible; width: 200px; height: 100px; margin: -30px 0 0 0; padding: 0; z-index: 2;">
   <p class="special">item that needs to show itself outside the parent borders</p>
</div>

    Si cela ne correspond pas à vos besoins, peut-être qu'on pourrait décrire la structure de vos menus de la meilleure façon afin que nous puissions comprendre ce dont vous avez besoin? Avez-vous un lien vers un exemple, peut-être?

    Modifier en fonction des nouveaux renseignements

    Après avoir regardé votre exemple de lienil ressemble à ce que vous voulez faire est de clip le contenu horizontalement, tout en permettant à débordement à la verticale. Vous pouvez faire cela en utilisant une très haute valeur de la hauteur, et de définir ensuite un négatif de la marge du bas:

    <div style="width: 200px; height: 2000px; margin: 0 0 -1960px 0; overflow: hidden;">
    <p>Thisisaverylongsentencedesignedtooverflowthewindowverticallysopleasepermitmetotypeitwithoutandspaces</p>
    Item 1<br />
    Item 2<br />
    Item 3<br />
    Item 4<br />
</div>

    Est-ce que vous souhaitez?

  2. 6

    Vous pouvez faire la special de l'élément en position absolue

    .special{
 position:absolute;
}

    Mais cela ne fonctionnera que lorsque le .special ne permet pas de définir une position (haut/gauche/bas/droite), et aussi il ne sera pas être utilisé si vous souhaitez par la suite de calculer la hauteur de la div parent..

    exemple : http://jsfiddle.net/gaby/aT3We/

    L'exigence est bien un peu bizarre, et il pourrait être mieux de repenser l'ensemble de la question..

    (exactement ce que vous essayez d'atteindre avec cette ?)

  3. 1

    Pourquoi auriez-vous besoin de faire cela? Peut-être une meilleure solution peut être faite.

    Je ne pense pas que la définition de overflow: auto; sélective est possible, comme overflow est appliqué pour les parents, pas les enfants, donc c'est comme avoir color: red et color: blue sur le même élément, en même temps, ils n'ont tout simplement pas de sens lorsqu'ils sont mis ensemble (mauvais exemple, mais vous voyez l'idée).

  4. 1

    J'ai eu un problème comme ça où ces dispositions n'étaient pas de travail. Il y avait une liste d'éléments dans un conteneur, dont chacun peut être de taille variable en fonction de combien d'où dans la liste (avec un minimum). Le conteneur a été overflow: hidden; et il y avait une partie de l'élément de la liste qui n'était qu'une goutte vers le bas et serait coupé.

    Ma solution:

    //get dropdown container position, make a modification, and apply to dropdown
function openDropdown(){
  var offSet = $('.dropdown.open').parent().offset();
  offSet.top = offSet.top + ($('.dropdown.open').parent().height() / 2);
  $('.dropdown.open').offset(offSet);
}

//on scroll reassess dropdown position
$(window).on('scroll', window, function(){
  if($('.dropdown.open')[0] != undefined){
    openDropdown();
  }
});

//on click close open dropdowns and open this one
$('body').on('click', '.dropdown', function(){
  $('.dropdown.open').removeClass('open');
  $(this).addClass('open');
  openDropdown();
});