Positionnement non pris en compte

**chrtophe** · 10/07/2017, 21h03

Bonsoir,

Je galère à comprendre le positionnement en CSS.

Je cherche tout simplement à placer un bloc à x % à droite et y % en bas par rapport au point 0,0 du bloc en cours.

J'ai tenté ceci :

Code :

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
23
24
25
<HTML>
<HEAD>
<SCRIPT>
.pos1
{
 position:absolute;
 right: 90px;
 bottom : 30px;
}
.pos2
{
 position:relative;
 right: 60px;
 bottom : 20px;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV class="conteneur">
test
<DIV class="pos1">pos 1</DIV>
<DIV class="pos2">pos 2</DIV>
</DIV>
</BODY>
</HTML>

Que je mette position relative ou absolute, les 3 éléments sont les un en dessous des autres. Comment décaler pos à droite et plkus bas par rapport à test ?

Il y a un truc qui m'échappe.

Mer(ci d'avance pour le coup de main.

**NoSmoking** · 10/07/2017, 21h33

Bonjour,

Il y a un truc qui m'échappe.

des balises <script></script> pour déclarer des STYLEs !?!

Nota :
prend l'habitude de mettre

tes balises en minuscule
de placer un <!doctype html> en tête de tes documents.

**JefReb** · 11/07/2017, 08h58

Pour pouvoir positionner en absolute dans un conteneur il faut que ce conteneur soit positionné.
donc pour que pos1 se positionne il faut:

Code css :

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

1
2
3
.conteneur {
	position: relative;
}

ou autre ...

**chrtophe** · 11/07/2017, 09h28

J'ai compris mon prob. (en dehors de l'énormité <script></script>)

Voici une exemple :

Code :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<HTML>
<HEAD>
<style type="text/css">
.conteneur {
 border : solid 1px;
 height : 100%;
}
.block1 {
 background-color : yellow;
 position:absolute;
 width:100px;
 height:100px;
}
.block2 {
 background-color : red;
 position:absolute;
 width:100px;
 height:100px;
 top : 50%;
}
.block3 {
 background-color : gray;
 position:absolute;
 width:100px;
 height:100px;
 top : 5%;
 left : 5%;
}
</style>
</HEAD>
<BODY>
<div class="conteneur">
<div class="block1">block 1</div>
<div class="block2">block 2</div>
<div class="block3">block 3</div>
</div>
hors bloc
</BODY>
</HTML>

Pour le bloc 2, je décale de 50 % par rapport au coin haut gauche dans l'axe haut-bas depuis le coin haut gauche. Comme rien n'est précisé pour l'axe droite-gauche, il n'y a aucun décalage
Pour le bloc 3, je décale de 5 % le bloc sur les deux axes.

Ce que je n'avais pas compris : si je remplace top par bottom pour le bloc 3, le bloc va être positionné en bas avec un décalage de 5 % par rapport au bord bas.

J'ai pigé le truc.

Nota :
prend l'habitude de mettre

tes balises en minuscule
de placer un <!doctype html> en tête de tes documents.

Quel est l’intérêt des balises en minuscule ?

**JefReb** · 12/07/2017, 09h35

Je pense que tu n'as pas tout à fait compris le positionnement.
Si on applique ton exemple, la div ".conteneur" ne sert absolument à rien.
regardes ton exemple cela fait juste une barre tout en haut de l'écran.
La position absolute tel que tu l'utilises est par rapport à l'écran.
Ainsi le bloc1 jaune est au coin supérieure gauche 0,0 car sans indication, c'est top:auto et left:auto
Quand au bloc2 rouge, si ton écran fait 1024 de haut il sera à 512px du haut (Top:50%)
le bloc3 gris est à 5% donc environ 51px du haut et de la gauche (5% de 1024)

Par contre si tu déclares ".conteneur" en position relative et que tu décalles un peu en donnant une hauteur et une largeur, tu vois tout de suite que la position absolute est alors par rapport à la div conteneur

Voir le codepen: https://codepen.io/JefReb/pen/JJwOBm

Code css :

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
23
24
25
26
27
28
.conteneur {
	position:relative;
	left:150px;
	border : 1px solid red;
	height : 300px;
	width:500px;
}
.block1 {
	background-color : yellow;
	position: absolute;
	width: 100px;
	height: 100px;
}
.block2 {
	background-color : red;
	position: absolute;
	width: 100px;
	height: 100px;
	top : 50%;
}
.block3 {
	background-color : gray;
	position: absolute;
	width: 100px;
	height: 100px;
	top : 5%;
	left : 5%;
}

Code html :

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

1
2
3
4
5
6
<div class="conteneur">
  <div class="block1">block 1</div>
  <div class="block2">block 2</div>
  <div class="block3">block 3</div>
</div>
<p>hors bloc</p>

Quant aux majuscules, il est vrai qu'il est préférable de prendre l'habitude de tout mettre en minuscule.
D'une part c'est plus facile de rechercher visuellement. Dreamweaver par exemple écrit toujours en minuscule même lors d'une recherche.
Cela évite aussi de donner des noms en majuscule et minuscule pour les images ou les fichiers, car il ne faut pas oublier que les serveurs sont en générale en linux ou unix.
Index.html et index.html sont deux fichiers différents pour le serveurs.

**chrtophe** · 12/07/2017, 20h15

Je pense que tu n'as pas tout à fait compris le positionnement.

Fort probable, c'est mes premiers essais. Je fais pas de dev sauf un tout petit peu en amateur.

J'arrives à quelque chose d'exploitable, mais comme je ne maitrise pas, je ne suis pas à l'abri d'une mauvaise surprise si je modifie.

Par contre si tu déclares ".conteneur" en position relative et que tu décalles un peu en donnant une hauteur et une largeur, tu vois tout de suite que la position absolute est alors par rapport à la div conteneur

Là j'avoue que j'ai un peu du mal. Je comprend le principe d'être relatif par rapport au bloc conteneur, mais dans ce cas quel est l'intérêt de mettre absolutre dans les sous--blocs, leurs positions étant relative au bloc conteneur ?

**JefReb** · 12/07/2017, 21h03

Dur dur de répondre, car ce sont les bases même, le BA B A, qui te font apparemment défaut, sans vouloir vexer!
Le positionnement est vraiment la base qu'il faut maîtriser.
L'expliquer, au vue des réponses, demande un gros temps "chronophage" alors que la lecture d'excellents tutto répondent à ses intérrogations.
Lire, après recherche, dans ce même site:
https://css.developpez.com/tutoriels...nement#LVI-B-3

Mais je pense que, tous, sont à l'écoute de tes prochaines questions ...

**chrtophe** · 13/07/2017, 07h38

Je marque en résolu.

Il me faut pratiquer.

Positionnement non pris en compte

Positionnement en CSS

Discussions similaires

Partager

Partager