Position absolue et débordement :masqué

Question

<div id="parent" style="overflow:hidden; position:relative;">
  <div id="child" style="position:absolute;">
  </div>
</div>

Je dois afficher l'élément enfant qui est plus grand que son élément parent, mais sans supprimer le débordement :caché ; est-ce possible ? L'élément parent a position:relative; l'élément enfant est supprimé dès qu'il est hors de ses frontières parentales.

(les éléments ont des css supplémentaires définis je viens de mettre des attributs de style pour la clarté)

Answer 1

Le code ci-dessous fonctionne comme un charme.

<div id="grandparent" style="position:relative;">
    <div id="parent" style="overflow:hidden;">
        <div id="child" style="position:absolute;">
        </div>
    </div>
</div>

Answer 2

J'utilise habituellement overflow :caché comme clearfix. Dans ce cas, j'abandonne et j'ajoute juste une division supplémentaire

<div id="parent" style="position:relative;">
  <!-- floating divs here -->
  <div id="child" style="position:absolute;"></div>
  <div style="clear:both"></div>
</div>

Answer 3

Je l'ai fait de manière très simple

<div class="rootparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

.rootparent {
  position:relative;
  border:1px solid #ccc;
  width:150px;
  height:150px;
}
.parent {
  overflow:hidden;
}
.child {
   position: absolute;
   top: -10px;
   right: -15px;
   width: 30px;
   height: 30px;
   border: 1px solid red;
}

Voici le lien jsfiddle