Latest web development tutorials

CSS Positioning (positionnement)

parfois de positionnement très délicate!

Décider de montrer en face des éléments!

Les éléments peuvent se chevaucher!


Positionnement (positionnement)

propriétés de positionnement CSS vous permettent de localiser un élément. Il peut également être un élément dans un autre élément derrière, et spécifier un contenu de l'élément est trop grand, ce qui devrait arriver.

Les éléments peuvent être utilisés en haut, en bas, à gauche et à droite le positionnement des attributs. Cependant, ces propriétés ne fonctionnera pas à moins que la propriété position est définie en premier. Ils ont également différents modes de fonctionnement, en fonction de la méthode de positionnement.

Il existe quatre méthodes de positionnement différents.


positionnement statique

éléments HTML par défaut, qui ne sont pas situés, les éléments apparaissent dans le flux normal.

éléments de positionnement statiques ne seront pas en haut, en bas, à gauche, à droite influence.


Le positionnement fixe

Position de l'élément par rapport à la fenêtre du navigateur est une position fixe.

Même lorsque la fenêtre est roulant, il ne bouge pas:

Exemples

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Essayez »

Remarque: le positionnement fixedans IE7 et IE8 Description DOCTYPE doivent soutenir!

le positionnement fixe de la position des éléments d'un document indépendant de l'écoulement, et donc ne pas occuper l'espace.

éléments positionnés fixes et d'autres éléments se chevauchent.


positionnement relatif

l'élément de positionnement relatif est positionné par rapport à sa position normale.

Exemples

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Essayez »

Peut être déplacé le positionnement relatif des éléments de contenu et des éléments qui se chevauchent, il ne change pas l'espace d'origine occupée.

Exemples

h2.pos_top
{
position:relative;
top:-50px;
}

Essayez »

élément de positionnement relatif est souvent utilisé comme un bloc conteneur éléments en position absolue.


Le positionnement absolu

La position absolue des éléments de positionnement par rapport à l'élément parent positionné le plus proche, si l'élément n'a pas déjà positionné élément parent, sa position par rapport à la balise <html>:

Exemples

h2
{
position:absolute;
left:100px;
top:150px;
}

Essayez »

Absolument positionné de telle sorte que la position des éléments de document indépendants des flux, et donc ne pas occuper l'espace.

éléments en position absolue et d'autres éléments se chevauchent.


Eléments de chevauchement

Orientation et indépendante des éléments de flux de documents, de sorte qu'ils peuvent couvrir d'autres éléments sur la page

attribut z-index spécifie l'ordre d'empilement d'un élément (quel élément doit être placé devant ou derrière)

Element peut avoir un ordre de pile positive ou négative:

Exemples

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

Essayez »

Element a un ordre supérieur empilement est toujours en face de l'ordre d'empilement inférieur d'éléments.

Remarque: Si deux éléments positionnés se chevauchent, ne précisent pas le z - index, le positionnement final des éléments dans le code HTML sera affiché sur le dessus.


Exemples

D'autres exemples

Forme des éléments de coupe

Cet exemple montre comment définir la forme de l'élément. L'élément est clipsé dans cette forme, et affichée.

Comment utiliser la barre de défilement pour afficher le contenu du débordement d'élément interne

Cet exemple démontre la propriété de débordement pour créer une barre de défilement, lorsque le contenu d'un élément dans la zone désignée est trop grand, comment mettre en place pour accueillir.

Comment configurer le navigateur pour gérer automatiquement le débordement

Cet exemple montre comment définir le navigateur pour gérer automatiquement le débordement.

Change Cursor

Cet exemple montre comment modifier le curseur.


Toutes les propriétés de positionnement CSS

colonne "CSS" indique le nombre qui CSS (CSS1 ou CSS2) version de la définition de la propriété.

propriété explication valeur CSS
bas Décalage définit la limite entre l'élément inférieur de positionnement hors de son bloc contenant de la frontière dessous. auto
longueur
%
hériter
2
agrafe Clips un éléments en position absolue forme
auto
hériter
2
curseur Déplacez le curseur pour afficher le type spécifié url
auto
réticule
par défaut
aiguille
déménagement
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
texte
attendre
aider
2
gauche Définit les éléments de ciblage gauche marge de compensation bloc frontière entre le bord gauche de son contenant. auto
longueur
%
hériter
2
débordement
Lorsque le contenu de l'élément défini ce qui arrive quand débordé sa région. auto
caché
volute
visible
hériter
2
overflow-y
Indique comment gérer le contenu du bord supérieur / inférieur de l'élément zone de contenu de trop-plein auto
caché
volute
visible
sans affichage
sans contenu
2
x débordement
Indique comment gérer le bord droit / gauche de la zone de contenu du trop-plein de contenu de l'élément auto
caché
volute
visible
sans affichage
sans contenu
2
position Spécifiez le type d'éléments de positionnement absolu
fixé
relatif
statique
hériter
2
droit Il définit les éléments de ciblage comprenant sa frontière et la marge de droite décalage entre la bordure droite du bloc. auto
longueur
%
hériter
2
haut Elle définit un élément de positionnement sur le bord de sa marge et sur le bloc contient le décalage entre les limites. auto
longueur
%
hériter
2
z-index Réglage de l'ordre d'empilement des éléments nombre
auto
hériter
2