Positionner un élément en css

Positionnement

Il est possible de spécifier la position d'un élément de quatre manières différentes à l'aide de la propriété position et de l'une des valeurs suivantes :

relative La position de l'élément est déplacée...- comme l'on pouvait s'y attendre et devant nos yeux ébahis - relativement à sa position normale. Convient pour déplacer un élément d'une certaine distance spécifiée. Dans certains cas, vous pouvez aussi utiliser les marges de l'élément pour obtenir le même effet [ margin pour les marges externes aux blocs et padding pour les marges internes. (Très utile pour Internet Explorer à la traîne d'ailleurs...)]

fixed La position de l'élément est fixée. C'est comme ça et pis c'est tout !
Spécifie la position de l'élément relativement à la fenêtre du document. Même si le reste du document défile, l'élément reste en place. Et toc !
Attention, le navigateur Internet Explorer n'interprète pas cette position ! Qu'aurait-on fait sans lui pour nous faire suer ?!...

absolute La position de l'élément est fixée relativement à un élément parent. Ceci fonctionne uniquement lorsque l'élément parent est lui-même positionné avec relative, fixed ou absolute. Vous pouvez rendre n'importe quel élément parent utilisable en lui spécifiant une position: relative; sans par ailleurs lui spécifier aucun déplacement.

static La valeur par défaut et pourtant que de qualités ce css.... Cette valeur convient pour désactiver explicitement les autres sortes de positionnement.
En complément de ces valeurs de la propriété position (à l'exception de static), spécifiez une ou plusieurs de ces propriétés : top (haut), right (droite), bottom (bas), left (gauche), width (largeur), height (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.

Exemple

Pour positionner deux éléments l'un au dessus de l'autre, créez un élément parent conteneur avec les deux éléments à l'intérieur de celui-ci :
	<DIV id="conteneur">
<P id="front">/</P>
<P id="back">\</P>
</DIV>

Dans votre feuille de style, rendez la position de l'élément conteneur relative. Il n'est pas nécessaire de spécifier un déplacement. Rendez ensuite la position des enfants absolute :

		#conteneur {
		  position: relative;
		  font: bold 200% sans-serif;
		  }
		
		#front, #back {
		  position: absolute;
		  margin:0px;
		  top: 0px;
		  left: 0px;
		  }
		
		#front {
		  color: green;
		  }
		
		#back {
		  color: red;
		  }
	

Le résultat est une barre oblique inversée par dessus l'autre barre oblique : ♪♬♫ E viva italia...♪♬♫

/

\



Lire centrer un bloc
Poster un commentaire

© latarteauchips 2024
Volet automatique | Les amis des loisirs : Sorties spectacles paris| Chalet Vosges | Bioénergétique | Visites Paris |
artisan web
achat cash de votre mobile et recyclage telephone
Revendez vos mobiles chez Mister Reprise
Astuces & trucs
Css
Divertissement
Html
Javascript
Linux
Outils
Php
Scripts
Sécurité failles
setia industrie logo
Setia Industries