propriété top qui ne marche pas sur DIV relative

**comode** · 25/07/2013, 17h41

Bonjour,

Comme le titre l'indique, je butte sur le positionnement d'un DIV en positionnement relatif.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html>

dans le CSS, je met :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.calendrier_nom_jour {
	position:relative;
	border:1px solid #000000;
	background-color:#FFC;
	top:25px;
}

et je génère dynamiquement mes DIV via un script JS :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function MkCalendrier(objParent)
{
	objParent.innerHTML = 'pouet';
	objParent.style.overflow = "visible";
 
	calendrier = document.createElement('div');
	calendrier.id = 'global_div_calendrier';
	calendrier.innerHTML = '&nbsp;plop';
	calendrier.style.overflow = "visible";
	objParent.appendChild(calendrier);
 
	for(i=0;i<7;i++)
	{
		tmpj = document.createElement('div');
		tmpj.className = "calendrier_nom_jour";
		tmpj.innerHTML = 'Z&nbsp;';
		tmpj.style.left = ((100 / 8) * i) + "px";
		tmpj.style.width = (100 / 8) + "px";
		//tmpj.style.top = "25px"; // activé ou pas, ça change rien
		calendrier.appendChild(tmpj);
	}
}

Et le résultat donne :

Le top est donc ignoré en relative... Il me semble pourtant que ça ne devrait pas être le cas en relatif ? Je me trompe ? ou voyez vous un problème ?

En vous remerciant.

**rodolphebrd** · 25/07/2013, 18h44

Bonjour,

avec votre code html on pourrait mieux tester le problème !

Note : un élément en position relative se positionnera par rapport à sa position d'origine. Donc si vous observez un résultat différent c'est que le problème vient d'ailleurs.

**comode** · 25/07/2013, 19h00

Commde je disais, c'est un code dynamique, je n'ai donc (preque) pas de HTML...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<meta charset="utf-8"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >
<head>
    <link rel="stylesheet" type="text/css" href="./styles/style.css" />
    <link rel="stylesheet" type="text/css" href="./styles/calendrier.css" />
    <script language="javascript" type="text/javascript" src="./js/calendrier.js"></script>
</head>
<body>
<center>
<div style="width:1000px;text-align:left;background-color:#FFF;height:100%;border-radius:5px;border:1px solid #000000;box-shadow:2px 2px 2px #000000;">
<div class="left_box" style="top:163px;height:100px;" id="left_box_calendrier">&nbsp;</div>
</div>
</center>
</body>
</html>
<script language="javascript">
	MkCalendrier(document.getElementById('left_box_calendrier'));
</script>

et tant qu'a faire le style.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.left_box {
	position:fixed;
	border:1px solid #000000;
	border-radius:5px;
	width:180px;
	background-color:#F4FAFB;
	z-index:500;
	text-align:center;
	padding:5px;
	box-shadow:1px 1px 1px #000000;
	overflow:hidden;
	margin-left:1px;
	z-index:900;
}

**comode** · 26/07/2013, 05h17

Je crains de comprendre... le petit mot qui change tout...

par rapport à sa position d'origine.

bordel... je croyais que c'était relatif à l'origine du container... donc au final, en ne manipulant que des div et comme c'est foutu, c'est un peu comme si l'abscisse était bien par rapport à l'origine du container alors que l'ordonnée dépend des objets déjà insérés... Je me comprend... bref...

Bon, du coup, existe t-il un moyen de positionner des div par rapport à l'origine du container (sans passer par un calcul JS), ou vaut-il mieux revenir à la gestion par tableau ?

En vous remerciant.

**Bovino** · 26/07/2013, 08h24

Type de positionnement | position.

**Bisûnûrs** · 26/07/2013, 08h53

Envoyé par Bovino

:

Type de positionnement | position.

Y a quelque chose que j'aime pas bien dans ce tuto, à l'endroit que tu pointes :

absolute (sera placé tout en haut de la page)

La vérité c'est que absolute, c'est placé en rapport avec le parent positionné le plus proche, à défaut le viewport.

**Bovino** · 26/07/2013, 08h58

Oui, je sais, j'ai envoyé un message à Torgar dans ce sens.

absolute : retire complètement l'élément du flux et le positionne en fonction des propriétés top, right, bottom et left ;

Il faut lire
absolute : retire complètement l'élément du flux et le positionne par rapport à son ancêtre positionné le plus proche (à défaut la fenêtre du navigateur ou viewport) en fonction des propriétés top, right, bottom et left ;

**Bisûnûrs** · 26/07/2013, 09h00

Et du coup ça répond à la question de comode.

propriété top qui ne marche pas sur DIV relative

CSS

Discussions similaires

Partager

Partager