Dans tous les navigateurs que j'ai utilisés, à l'exception de ie8, un élément positionné de manière absolue peut être positionné en fonction du parent le plus proche avec le positionnement relatif.
Le code ci-dessous montre deux divs dans une table. La div du haut a la position: relative, cependant, l'élément imbriqué, absolument positionné, ne respecte pas ses limites (dans ie8, il se positionne au bas de la page au lieu du bas de la div parent).
Est-ce que quelqu'un connaît un correctif pour cela?
<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
<tr>
<td><div id="top"> Div with id="top"
<div id="position_me"> Div with id="position me" </div>
</div>
<div id="bottom"> Div with id="bottom"
<p>Lorem ipsum dolor sit amet.</p>
</div></td>
</tr>
</table>
Déclarer un doctype. Je vous encourage à utiliser le doctype HTML5:
<!DOCTYPE html>
Ajoute ça:
#top {
//height: 100%;
}
#position_me {
//left: 0;
}
Il force IE8 à calculer la position correctement en mode quirks. Il y a plusieurs façons de l'obtenir:
//zoom: 1;
//writing-mode: tb-rl;
C'est parce que vous n'utilisez pas le type de document. Et IE travaillant dans le mode "quirks" .
Essayez ce doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
j'utilisais toujours le doctype HTML5, mais dans mon cas, le seul problème était que l'élément parent avait besoin de "position: relative;" spécifiquement défini. après cela, cela a parfaitement fonctionné.
Vous pouvez aussi utiliser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Cela a résolu mon problème!