Explication de la gestion des bugs position CSS
Définition bug position CSS
Vous trouverez ci-dessous divers bugs d'interprétation de la CSS position.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart des bugs CSS "non vérifiés", c'est que je ne possède pas le navigateur sur lequel a été détecté le bug.
Ceux que j'ai pu visualiser sont notés :
Bug vérifié : oui.
Bug position CSS n° 1
Bug position mis par Dmc
Système d'exploitation : windows nt 1
Navigateur : Firefox 75.0
Bug vérifié : oui
Problème avec position:
La propriété Css position:sticky ne fonctionne pas si un élément parent (quelque soit sa position) à une propriété Css overflow[-*] : auto ou overflow[-*] : hidden.
J'ai le problème sur Edge, FireFox et Chrome, il semble que cela concerne aussi Safari.
Solution du problème par DMC :
Pas de solution, à part de ne pas mettre de propriété Css overflow[-*] : auto sur un des parents, ou mettre overflow[-*] : visible.
Bug position CSS n° 2
Bug position mis par dmc
Système d'exploitation : mozilla/5.0 (windows; u; windows nt 5.1; fr; rv:1.9.0.1) gecko/2008070208 firefox/3.0.1
Navigateur : Firefox 3.0.
Bug vérifié : oui
Problème avec position:
Une cellule de tableau (td) n'accepte pas la valeur position:relative ou position:absolute.
Sous Firefox, Opéra, Safari.
Code css :.setposition{
position:relative;
}
#layer{
position:absolute;
}
Code (X)HTML :<table >
<tr>
<td class="setposition">
<div id="layer">position absolute</div>
</td>
</tr>
</table>
Solution du problème par DMC :
La solution au problème consiste à mette une balise dans la cellule de tableau (td) en position:relative;
Code css :.setposition{
position:relative;
}
#layer{
position:absolute;
}
Code (X)HTML :<table >
<tr>
<td>
<div class="setposition">
<div id="layer">position absolute</div>
</div>
</td>
</tr>
</table>