web-dev-qa-db-fra.com

CSS: Comment avoir la position: div absolue dans une position: la div relative ne doit pas être recadrée par un débordement: masqué sur un conteneur

J'ai 3 niveaux de div:

  • (En vert ci-dessous) Un niveau supérieur div avec overflow: hidden. C'est parce que je veux que du contenu (non montré ici) à l'intérieur de cette boîte soit tronqué s'il dépasse la taille de la boîte.
  • (En rouge ci-dessous) À l'intérieur de cela, j'ai div avec position: relative. La seule utilisation de ceci est pour le niveau suivant.
  • (En bleu ci-dessous) Enfin un div je sors 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 retirée du flux et s'étendre 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, je reçois:

Et enlever le position: relative sur la case rouge, la case bleue est maintenant autorisée à sortir de la case verte, mais elle n’est plus positionnée par rapport à la case rouge:

Y a-t-il un moyen de:

  • Garder le overflow: hidden sur la case verte.
  • La boîte bleue s'étend-elle au-delà de la boîte verte et est-elle positionnée par rapport à la boîte rouge?

La source complète, avec CSS intégré pour le test:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <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>
    </body>
</html>
cssoverflowpositionrelative
129
avernet

Une astuce qui fonctionne consiste à positionner la case n ° 2 avec position: absolute au lieu de position: relative. Nous mettons habituellement un position: relative sur une boîte extérieure (ici la boîte n ° 2) lorsque nous voulons une boîte intérieure (ici la boîte n ° 3) avec position: absolute à positionner par rapport à la boîte extérieure. Mais rappelez-vous: pour que la case n ° 3 soit positionnée par rapport à la case n ° 2, la case n ° 2 doit simplement être positionnée. Avec ce changement, nous obtenons:

Et voici le code complet avec ce changement:

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

J'ai ajouté plus de détails à ce sujet sur Boîte absolument positionnée à l'intérieur d'une boîte avec débordement: auto ou cachée .

48
avernet

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

Un effet similaire peut être obtenu en ayant un div positionné absolu qui correspond à la taille de son parent en le positionnant dans votre conteneur relatif actuel (le div que vous ne souhaitez pas découper doit être en dehors de ce div):

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

N'oubliez pas que si vous ne devez découper que le contenu sur l'axe des x (ce qui semble être votre cas, car vous n'avez défini que la largeur de la div), vous pouvez utiliser overflow-x: hidden.

5
vise

Je ne vois pas vraiment comment y arriver. Je pense que vous pourriez avoir besoin de retirer le overflow:hidden de la division n ° 1 et ajoutez une autre division dans la division n ° 1 (en tant que frère de la division n ° 2) pour contenir votre 'contenu' non spécifié et ajouter le overflow:hidden à cela à la place. Je ne pense pas que ce débordement puisse être (ou devrait pouvoir être) maîtrisé.

0
graphicdivine

Si un autre contenu n'est pas affiché dans la division externe (la boîte verte), pourquoi ne pas l'envelopper dans un autre div, appelons-le "content". Débordement masqué sur cette nouvelle division intérieure, mais maintenez le débordement visible sur la zone verte.

Le seul inconvénient est que vous devrez ensuite vous occuper de la contenu pour vous assurer que la div du contenu n’interfère pas avec le positionnement de la zone rouge, mais il semble que vous devriez pouvoir y remédier avec un peu de maux de tête.

<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>
0
Anthony