Comment ignorer parent de l'élément de débordement:caché en css

J'ai un div élément d'emballage d'autres éléments div comme ceci:

<div style="overflow:hidden">
    <div id="a"></div>
    <div id="b"></div>
</div>

J'ai d'autres règles css qui gèrent les dimensions de la div extérieure. Dans mon code, je veux la position de la div#a exactement 10 px-dessous de la div extérieure. Cependant, je veux div#b à toujours être coupée par la div extérieure de l'overflow:hidden.

Quelle est la meilleure façon d'atteindre cet objectif?

  • Vous ne pouvez pas le faire comme ça, vous avez besoin de prendre div#un de la div avec overflow:hidden.
  • #a { position: relative; top: 10px; }? ou avez-vous signifiait que vous voulez #a au-DESSOUS de la bordure inférieure de la face externe de la div?
  • oui pour je veux à la position #un au-dessous de la bordure inférieure de la face externe de div
  • Ensuite, vous ne pouvez pas faire avec votre structure. un enfant ne peut pas changer d'un parent styles. Vous aurez à déplacer #a à l'extérieur du conteneur
  • il semble que la seule façon de le faire lorsque vous ne pouvez pas placer #a à l'extérieur de la maison mère est à définir style="overflow:visible" à la société mère )))
InformationsquelleAutor John | 2012-08-17
  1. 72

    Méthode 1

    Une bonne façon de le faire est par le réglage de l'élément débordant de position:fixed (ce qui fera que l'on ignore la mère de débordement), puis en le positionnant par rapport au parent à l'aide de cette technique:

    ​.parent {
   position: relative;      
   .fixed-wrapper {
       position: absolute;         
       .fixed {
           position: fixed;
       }
   }
}

    Seul inconvénient est que vous ne pouvez pas avoir tout en haut,à droite,à gauche,en bas jeu de propriétés sur l'élément fixe (ils doivent tous être par défaut "auto"). Si vous avez besoin d'ajuster la position légèrement, vous pouvez le faire en utilisant positif/négatif de la marge.

    Méthode 2

    Un autre truc que j'ai récemment découvert est de garder la overflow:hidden élément avec position:static et la position de la primauté de l'élément par rapport à un supérieur parent (plutôt que de la overflow:hidden parent). Comme:

    http://jsfiddle.net/kv0bLpw8/

    • Vous sir sont un sauveur! vous réponse est plus simple et nécessite moins de DOM changements (au moins dans mon cas).
    • Ce devrait être le defacto solution. Fonctionne comme un rêve sur tous les navigateurs.
    • Je peux confirmer que la méthode #1 a fonctionné pour moi aussi. Les navigateurs qui ne vous de tester la méthode #1 @mattforni?
    • Chome, FF, Opera. Ne me souviens pas si tout les autres. Il a été plus d'un an.
    • Méthode 1 fonctionne, mais peut donner des résultats étranges, si l'utilisateur fait défiler la page. Les gens de l'atterrissage sur cette réponse: assurez-vous de vérifier le JSFiddle en vertu de la Méthode 2-c'est très simple et fonctionne très bien!
    • Méthode 1 a encore une mise en garde: vous ne devez avoir aucun jeu de transformations sur l'élément qui a débordement
    • Ne joue pas bien si le conteneur a barre de défilement
    • Méthode 2 ne fonctionne que si vous n'avez pas les éléments en position relative entre la feuille et le conteneur parent... qui Ne fonctionne pas dans mon cas où je ne peux pas vraiment remplacer un style.
    • Méthode 2 fonctionne très bien! Est-ce spécifié dans les spécifications? Ce comportement peut être modifié dans le futur?
    • Méthode 2 est beaucoup mieux, car il fonctionne à l'intérieur d'une zone déroulante contenant...
    • Choix intéressant de "ignorer dépassement de' nom de la classe de violon.

    InformationsquelleAutor parliament
  2. 2

    CSS

    <style type="text/css">
#wrapper {
    width: 400px;
    height: 50px;
    position: relative;
    z-index: 1000;
    left: 0px;
    top: 0px;
}

#wrapper #insideDiv {
    width: 400px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    z-index: 2000;
    left: 0px;
    top: 0px;
}

#wrapper #a {
    position: absolute;
    height: 30px;
    width: 100px;
    bottom: -40px;
    z-index: 1000;
    left: 0px;
}
</style>

    HTML

    <div id="wrapper">
  <div id="a">AAA</div>
  <div id="insideDiv">
    <div id="b">BBB</div>
  </div>
</div>
    • ce code résout le problème en changeant la structure du document html, mais ne pas ignorer parent de l'élément de débordement
    InformationsquelleAutor Gustonez
  3. 1

    que les gens ont dit, l'élément doit être présentée à l'extérieur de la mère afin de ne pas être recadrées. Mais vous pouvez le faire avec JavaScript pour réaliser le concept similaire, sans avoir à changer votre majoration réelle:

    function breakOverflow(elm) {
   var top = elm.offset().top;
   var left = elm.offset().left;
   elm.appendTo($('body'));
   elm.css({
      position: 'absolute',
      left: left+'px',
      top: top+'px',
      bottom: 'auto',
      right: 'auto',
      'z-index': 10000
   });
}

    puis passer l'élément que vous souhaitez exclure de la culture de son parent:

    breakOverflow($('#exlude-me'));
    • Cette méthode a des inconvénients: 1. l'élément de perdre certains styles (par exemple .parent .élément { ... }) 2. vous ne pouvez pas compter sur les ancêtres dans le code js (par exemple, $(element).le plus proche('.js-parent'))
    InformationsquelleAutor Heidar