28172 sujets

CSS et mise en forme, CSS3

[Resolu]table-cell et position d'un enfant en absolute

Un enfant en position: absolute se place par rapport au premier parent positionné. On est tous d'accord sur cet état de fait.
Donc pour positionner un enfant en absolute par rapport à son parent direct il suffit, de manière simple, de placer ce dernier en position: relative
Et ça fonctionne très bien

Là où ça se complique c'est lorsque le parent est en display: table-cell.
Ca fonctionne sur tous les navigateurs sauf.......surprise.... firefox !?

Exemple:
Ici la div "test" se place bien dans le coin supérieur droit de sont parent sauf sur firefox.
Est-ce un bug? Ai-je fait une erreur ? Y a t-il une solution

Merci d'avance

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style>
	body {
		margin: 0px 0px;
		padding: 0px 0px;
	}
	
	#main {
		margin: 0px auto;
		width: 960px;
	}
	
	#header {
		background-color: blue;
	}
	#content {
		position: relative;
		background-color: red;
		display: table-cell;
		height: 200px;
		width: 100%;
	}
	
	#test {
	
		position: absolute;
		right: 0px;
		top: 0px;
		width: 100px;
		background-color: orange;
	}
	
	#aside {
		background-color: green;
		display: table-cell;
		height: 50px;
		min-width: 100px;
	}
	
	
	#footer {
		background-color: gray;
		
	}
	</style>
</head>
<body>
	<div id="main">
		<div id="header">header</div>
		<div id="content">content
			<div id="test">TEST</div>
		</div>
		<div id="aside">aside</div>
		<div id="footer">footer</div>
	</div>
</body>
</html>

Modifié par vnabet (08 Sep 2011 - 13:03)
Hello,

Un début de solution, mais très laid.

Edit : D'ailleurs ce n'est pas un bug.
la spec a écrit :
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
Voir la propriété position.
Modifié par Florian_R (07 Sep 2011 - 18:20)
En fait j'ai trouvé.
Dans les spécifications, une éléments afficher sous un format de tableau n'a pas la possibilité (en théorie) d'être affiché en "relative"

Donc ensuite, à chaque navigateur de voir midi à sa porte, dommage...

Une solution est de mettre une div enfant en relatif , dans mon élément table-cell et qui va prendre tout son espace. Donc, ensuite je positionne les enfants par rapport à cette div
Sujet clos
Aller à