CSS : Comment faire en sorte qu'une div position:absolute à l'intérieur d'une div position:relative ne soit pas tronquée par un overflow:hidden sur un conteneur ?

Question

CSS : Comment faire en sorte qu'une div position:absolute à l'intérieur d'une div position:relative ne soit pas tronquée par un overflow:hidden sur un conteneur ?

Demandé el 11 de Février, 2010: Quand la question a-t-elle été
47408 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai 3 niveaux de div :

(En vert ci-dessous) Un niveau supérieur div avec overflow: hidden . En effet, je veux que le contenu (non illustré ici) à l'intérieur de cette boîte soit recadré s'il dépasse la taille de la boîte.
(En rouge ci-dessous) A l'intérieur, j'ai div avec position: relative . La seule utilité de ceci est pour le niveau suivant.
(En bleu ci-dessous) Enfin un div Je me retire du flux avec position: absolute mais que je veux positionner par rapport au rouge div (pas à la page).

J'aimerais que la boîte bleue soit sortie du flux et s'étende au-delà de la boîte verte, mais qu'elle soit positionnée par rapport à la boîte rouge comme dans :

Cependant, avec le code ci-dessous, j'obtiens :

Et le fait de retirer le position: relative sur la boîte rouge, maintenant la boîte bleue est autorisée à sortir de la boîte verte, mais n'est plus positionnée par rapport à la boîte rouge :

Y a-t-il un moyen de :

Gardez le overflow: hidden sur la boîte verte.
La boîte bleue doit-elle s'étendre au-delà de la boîte verte et être positionnée par rapport à la boîte rouge ?

La source complète :

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

Demandé el 11 de Février, 2010 par avernet

0 votes

Clarification : Vous voulez donc que la boîte bleue (la div la plus intérieure) puisse déborder de la boîte verte (la div la plus extérieure) mais que le débordement reste caché sur la boîte verte ? En gros, il faut que le débordement soit caché sur tout ce qui se trouve dans le cadre vert SAUF sur le cadre bleu, c'est bien ça ?

Commenté el 11 de Février, 2010 par Anthony

0 votes

Anthony, oui, c'est exactement ça. Et je ne me soucie pas de ce qui arrive à la boîte rouge (#2), qui est juste là pour influencer le haut/la droite sur la boîte bleue (#3).

Commenté el 11 de Février, 2010 par avernet

6 votes

+1 pour avoir expliqué correctement une question que je pensais trop difficile à expliquer mais à laquelle je voulais vraiment une réponse.

Commenté el 3 de Août, 2013 par Andrew Mao

Afficher 1 autres commentaires

Answer 1

4 Réponses

Answer 2

57voto

avernet Points 10603

Une astuce qui fonctionne est de positionner la boîte n°2 avec position: absolute au lieu de position: relative . Nous mettons généralement un position: relative sur une boîte extérieure (ici la boîte #2) alors que nous voulons une boîte intérieure (ici la boîte #3) avec position: absolute à positionner par rapport à la boîte extérieure. Mais n'oubliez pas : pour que la boîte n° 3 soit positionnée par rapport à la boîte n° 2, il suffit que la boîte n° 2 soit positionnée. Avec ce changement, nous obtenons :

Et voici le code complet avec cette modification :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

Répondu el 11 de Février, 2010 par avernet (10603 Points )

6 votes

J'ai en fait utilisé position: static et cela a mieux fonctionné pour moi

Commenté el 24 de Juin, 2010 par Jason

0 votes

@Jason, très intéressant ; donc vous dites que vous utilisez position: static sur la boîte n° 2 au lieu de position: absolute .

Commenté el 25 de Juin, 2010 par avernet

0 votes

$Avatar de fractalbit$

MERCI ! position : absolute a fonctionné à merveille. Jason : cela n'a pas fonctionné avec static

Commenté el 31 de Décembre, 2010 par fractalbit

Afficher 7 autres commentaires

Answer 3

7voto

vise Points 4979

Il n'y a pas de solution magique pour afficher quelque chose en dehors d'un conteneur caché débordant.

Un effet similaire peut être obtenu en ayant un div positionné de manière absolue qui correspond à la taille de son parent en le positionnant à l'intérieur de votre conteneur relatif actuel (le div que vous ne souhaitez pas couper doit être à l'extérieur de ce div) :

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

Gardez à l'esprit que si vous ne devez découper le contenu que sur l'axe des x (ce qui semble être votre cas, puisque vous n'avez défini que la largeur de la division), vous pouvez utiliser l'option overflow-x: hidden .

Répondu el 11 de Février, 2010 par vise (4979 Points )

Answer 4

0voto

graphicdivine Points 6414

Je ne vois pas vraiment de moyen de le faire tel quel. Je pense que vous devez supprimer le overflow:hidden de div#1 et ajoutez une autre div à l'intérieur de div#1 (c'est-à-dire une sœur de div#2) pour contenir votre "contenu" non spécifié, puis ajoutez l'attribut overflow:hidden à la place. Je ne pense pas que l'on puisse (ou que l'on doive) passer outre l'overflow.

Répondu el 11 de Février, 2010 par graphicdivine (6414 Points )

Answer 5

0voto

Anthony Points 14424

S'il y a un autre contenu qui n'est pas affiché à l'intérieur de la div externe (la boîte verte), pourquoi ne pas envelopper ce contenu dans une autre div, que nous appellerons "content" . Le débordement est masqué sur ce nouveau div interne, mais le débordement reste visible sur la boîte verte.

Le seul problème est que vous devrez alors vous assurer que la division de contenu n'interfère pas avec le positionnement de l'encadré rouge, mais il semble que vous devriez être en mesure de résoudre ce problème sans trop de difficultés.

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

Répondu el 11 de Février, 2010 par Anthony (14424 Points )

CSS : Comment faire en sorte qu'une div position:absolute à l'intérieur d'une div position:relative ne soit pas tronquée par un overflow:hidden sur un conteneur ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS : Comment faire en sorte qu'une div position:absolute à l'intérieur d'une div position:relative ne soit pas tronquée par un overflow:hidden sur un conteneur ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: