définir la position dans un css

Version imprimable

12/01/2006, 22h51
pascal67

définir la position dans un css

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

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

merci
13/01/2006, 01h16
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 ! :wink:

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

Bon courage !
13/01/2006, 07h30
Glob

Citation:

Envoyé par 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

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?
13/01/2006, 10h24
Davboc

j'ai relu les specs par la suite et tu as raison j'avais mal compris un tutoriel...
Merci de la correction
13/01/2006, 13h58
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
13/01/2006, 14h24
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)
13/01/2006, 14h46
Glob

Citation:

Envoyé par artotal

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... :roll:
13/01/2006, 14h57
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 ?

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

Code:

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??

Citation:

Envoyé par pascal67

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:

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:

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