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:
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
{
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.
é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>:
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:
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.
D'autres exemples
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.
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 |