web-dev-qa-db-fra.com

Position en extension div absolu en dehors du débordement div masqué

Je n'ai pas fait de CSS depuis plusieurs mois, donc je pourrais manquer quelque chose de simple, mais quelle que soit la solution, je ne pouvais pas le comprendre. Voici donc le problème.

Voici la version simplifiée de mon code:

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

Donc, fondamentalement, j'ai besoin du test div interne pour étendre 200px vers la gauche, en dehors de l'enveloppe externe div. Le problème est que mon wrapper est débordé: caché et il ne permettra pas de sortir. J'en ai besoin pour rester trop plein: caché cependant, en raison de certains plugins js que j'utilise.

Y a-t-il donc des solutions? Merci

htmlcssoverflowcss-position
15
Nazar

La seule option est de déplacer ce div en dehors du overflow:hidden div. Vous ne pouvez pas dire cachez tout dans ce div qui déborde - sauf pour ce div ... faisons une exception.

Vous pouvez introduire une couche de plus dans votre hiérarchie, où le div intérieur est débordé caché et le div extérieur ne l'est pas. Ensuite, placez cet élément positionné dans la div extérieure. Un pseudo-exemple serait:

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

Si par hasard vous aviez un positionnement sur l'ancien div avec overflow:hidden, vous déplaceriez ce paramètre dans la division outer, permettant aux choses de se positionner correctement.

Donc, la réponse courte: aucune solution ne vous permettra de faire ce que vous voulez sans changer votre CSS pour ne pas être overflow:hidden ou sans modifier votre balisage.

16
Eli Gassert

Développer sur Piyas De:

n exemple

Notez que si le débordement caché a

position: relative

alors ça ne marchera pas

exemple non fonctionnel

11
Jdahern

Le débordement masqué peut en fait être ignoré si les règles suivantes sont respectées:

  • L'élément enfant débordant a un positionnement absolu
  • Le parent avec débordement masqué a un positionnement statique
  • Un deuxième wrapper parent avec positionnement relatif est ajouté

[~ # ~] html [~ # ~] 

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

[~ # ~] css [~ # ~] 

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

[~ # ~] violon [~ # ~] http://jsfiddle.net/vLsmmrz6/

5
Alex

Quelque chose comme -

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

Peut résoudre votre problème.

Voyez ... que cela aide ou non ...

3
Piyas De