CSS plaçant des propriétés

Maintenant toutes conceptions à faire entièrement dans le CSS qui a précédemment exigé l'utilisation des hyperimages de Javascript ou de HTML. Est non seulement il plus facile de coder, mais il charge également beaucoup plus vite !

Placer le parent

La position de l'élément de HTML change relativement à où elle semble normalement en utilisant le positionnement relatif.
Nous pourrions employer le positionnement relatif pour la déplacer un peu vers la droite et pour avaler un couple des Pixel, si nous avions un en-tête qui apparaît au dessus de notre page.

Code de CSS

h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: -10px;
}

En utilisant seulement deux (laissés et supérieurs), vous avez probablement noté que vous définissez les quatre directions possibles (à gauche, bien, vers le haut de, et vers le bas). Voici une référence rapide en déplaçant des éléments de HTML dans le CSS.

Mouvement laissé - employer une valeur négative pour la gauche.
Droite de mouvement - employer une valeur positive pour la gauche.
Se relever - employer une valeur négative pour le dessus.
Abaisser - employer une valeur positive pour le dessus.

Placer l'absolu

Vous définissez la valeur exacte de Pixel où l'élément indiqué de HTML semblera en utilisant le positionnement absolu.
Être ainsi sûr que vous mesurez à partir du dessus-gauche du secteur visualisable du navigateur.
Note : Firefox n'interprète pas actuellement l'absolu plaçant correctement. Cependant IE 6.0+ et opéra 8.0+.

Code de CSS

h3 {
position: absolute;
top: 50px;
left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}

L'exemple suivant démontrent comment placer la forme d'un élément

Code de CSS

<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>

</html>

La table follwing décrivent les propriétés de positionnement :

Property	Description	values
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length
clip	Sets the shape of an element .The element is clipped into this shape, and displayed	shape auto
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length
top	Sets how far the top edge of an element is to the left/right of the right edge of the parent element	auto % length
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom % length
z-index	Sets the stack order of an element	auto number