Discussion :

[pascal67]

bjr.
pour définir l'emplacement un objet, un cadre ou un calque sur une page, définir la position, pas la largeur de l'objet, mais sa position

verticale et horizontale, qu'elle sont les attributs?
je pense que ça part de la gauche vers la droite, et du haut vers le bas?

merci

[Davboc]

il y a les positionnements relatifs et absolus. Absolu c'est par rapport a la fenetre et relatif c'est par rapport au div qui se trouve au dessus dans le code HTML d'après ce que j'ai compris.
En css ça se définit par position:relative et position:absolute

ensuite il y a les attributs left, right, top et bottom mais aussi tous les margin et padding enfin bref toute une floppée d'attributs... Mais il y a les tutos de developpez.com bien entendu !

Cette CSS cheat sheet peut aussi t'être très utile !

Bon courage !

[Glob]

il y a les positionnements relatifs et absolus. Absolu c'est par rapport a la fenetre et relatif c'est par rapport au div qui se trouve au dessus dans le code HTML d'après ce que j'ai compris.
En css ça se définit par position:relative et position:absolute

Hello.
Sans vouloir me poser en contradicteur, une lecture récente des specs de CSS2 (http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf) semble indiquer que position:relative indique que le positionnement se fait relativement à l'endroit où l'élément aurait été normalement affiché, alors que position:absolute permettait un positionnement absolu par rapport à l'élément parent.

Que croire?

[Davboc]

j'ai relu les specs par la suite et tu as raison j'avais mal compris un tutoriel...
Merci de la correction

[Resyek]

Pour le positionnement "absolute", effectivement, c'est relatif à l'élément parent.

Un autre très bon site récapitulant toutes les fonctions css : Documentation CSS

[artotal]

d'après ma récente expérience l'absolute est fixé sans élément parent, d'ou le terme absolute !
Et le positionnement se fais du coin gauche en haut, définis comme le 0.
Pour répondre à ta question.
ex:
#chtouke {position:absolute;
top:20px;
left:100px;
}
Avec 4 valeur possible :
absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on descend plus bas dans la page.
relative : position relative, par rapport à la position "normale" de l'élément
static : positionnement normal (par défaut)


position:relative;
ex :
float:left; ►------right ou none------◄
attribut:
left : flottant à gauche
right : flottant à droite
none : pas de flottant (par défaut)


pour le positionnement tu as aussi
fixed mais sa pose un problème de compatibilité avec IE, sauf dans :
body {
}

Tu as clear pour stopper un flottant:
ex: clear:left;
attribut
left : supprime l'effet d'un flottant à gauche précédent
right : supprime l'effet d'un flottant à droite précédent
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite
none : pas de suppression de l'effet du flottant (par défaut)

[Glob]

d'après ma récente expérience l'absolute est fixé sans élément parent, d'ou le terme absolute !

Je ne prétend pas que les navigateurs actuels affichent correctement le position: absolute...

[artotal]

J'aimerai soulevez une ombre, la valeur static du positionnement absolute peux sur le papier remplacer la postion relative ?
et la valeur clear je vois pas sont utlilité poutant je la vois souvent sur le cssgarden, mais je ne comprend pas pourquoi ils l'utilisent et quand ?
Le positionnement doit se faire de critère mathématique par rapport à la page, mais lesquels ?
Vous en pensez quoi ?

[pascal67]

Sur le positionnement de deux objets qui se chevauchnet.
il dit;

Code :

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

1
2
3
4
5
6
7
8
Ordre d'affichage 
 
z-index
 
 En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être affiché au-dessus de l'autre. 
Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant. 
 
Par exemple, si vous avez 2 éléments positionnés en absolus avec un z-index de 10 pour l'un et de 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus.

mais dans le css, comment on l'écrit

comme ceci
z-index: 10px;

est ce en pixel??

[ilood]

mais dans le css, comment on l'écrit

comme ceci
z-index: 10px;

est ce en pixel??

Non le z-index ne possède pas d'unité.

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
div {
	position: absolute;
	height: 400px;
	width: 400px;
	border: 1px solid #000000;
}
#a {
	left: 15px;
	top: 10px;
	background-color: yellow;
	z-index: 8;
}
#b {
	left: 32px;
	top: 28px;
	background-color: red;
	z-index: 3;
}
#c {
	left: 150px;
	top:45px;
	background-color: #0000FF;
	z-index: 1;
}

Code :

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

1
2
3
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>