web-dev-qa-db-fra.com

Comment ignorer le débordement de l'élément parent: caché dans CSS

J'ai un élément div enveloppant 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 externe. Dans mon code actuel, je veux positionner le div # a exactement 10 px en dessous du div externe. Cependant, je veux que div # b soit toujours coupé par le débordement de la div externe: caché.

Quelle est la meilleure façon d'y parvenir?

cssoverflow
34
John

Méthode 1

Une bonne façon de le faire est de définir l'élément débordant sur position:fixed (ce qui le fera ignorer le débordement du parent), puis le positionner par rapport au parent en utilisant cette technique:

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

Une mise en garde est que vous ne pouvez définir aucune des propriétés supérieure, droite, gauche et inférieure sur l'élément fixe (elles doivent toutes être par défaut "auto"). Si vous devez ajuster légèrement la position, vous pouvez le faire en utilisant des marges positives/négatives à la place.

Méthode 2

Une autre astuce que j'ai récemment découverte est de garder le overflow:hidden élément avec position:static et positionner l'élément prioritaire par rapport à un parent supérieur (plutôt que overflow:hidden parent). Ainsi:

http://jsfiddle.net/kv0bLpw8/

75
parliament

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>
2
Gustonez

comme on l'a dit, l'élément doit être présenté en dehors du parent pour ne pas être recadré. Mais vous pouvez le faire avec JavaScript pour obtenir le concept similaire sans avoir à modifier votre balisage réel:

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 passez l'élément que vous souhaitez exclure du recadrage de son parent:

breakOverflow($('#exlude-me'));
1
Heidar