Positionnement absolu et masquage du débordement

Question

Nous avons deux DIV, l’un imbriqué dans l’autre. Si le DIV externe n’est pas défini pour être en position absolue, alors le DIV interne en position absolue ne respectera pas le masquage de débordement du DIV externe.

#first {
    largeur : 200 px ;
    hauteur : 200px ;
    couleur de fond : vert ;
    débordement caché;
}

#deuxième {
    largeur : 50 px ;
    hauteur : 50px ;
    couleur de fond : rouge ;
    position : absolue ;
    gauche : 250 px ;
    haut : 250 px ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="first">
    <div id="seconde"></div>
    <div id="troisième"></div>
</div>

Existe-t-il un moyen de faire en sorte que le DIV interne suive le masquage de débordement du DIV externe sans définir le DIV externe pour qu'il soit positionné de manière absolue (car cela briserait notre disposition globale) ? De plus, le positionnement relatif n'est pas une option pour notre DIV interne puisque nous devons « mettre en surbrillance » une table TD.

#first {
    largeur : 200 px ;
    hauteur : 200px ;
    couleur de fond : vert ;
}

#deuxième {
    largeur : 50 px ;
    hauteur : 400px ;
    couleur de fond : rouge ;
    position : relative ;
    gauche : 0px ;
    haut : 0px ;
}</pré>
<pre class="brush:html;toolbar:false;"><table id="first">
    <tr>
        <td>
            <div id="seconde"></div>
        </td>
    ≪/tr>
</table>

Y a-t-il d’autres options ?

Answer 1

Qu'en est-il de l'utilisation de divs externesposition: relative ? Dans l’exemple du masquage du div interne. Puisque haut ou gauche ne sont pas spécifiés, il ne se déplacera pas dans la mise en page.

Answer 2

Convertissez l'externe <div> 设置为 position: relative，将内部的 <div> 设置为 position: absolute. Cela devrait fonctionner pour vous.