CSS positionnement
Le positionnement peut être difficile parfois!
Décidez quel élément pour afficher en face!
Les éléments peuvent se chevaucher!
Positionnement
Les propriétés de positionnement CSS vous permettent de positionner un élément. Il peut également placer un élément derrière l'autre, et de préciser ce qui doit arriver lorsque le contenu d'un élément est trop grand.
Les éléments peuvent être positionnés en utilisant le haut, en bas, à gauche, et bonnes propriétés.Cependant, ces propriétés ne fonctionnera pas à moins que le propriété position est définie en premier. Ils ont également travailler différemment en fonction de la méthode de positionnement.
Il ya quatre différentes méthodes de positionnement.
Positionnement statique
Éléments HTML sont positionnés statique par défaut. Un élément statique placé est toujours positionné en fonction de l'écoulement normal de la page.
Statiques des éléments positionnés ne sont pas affectés par le haut, en bas, à gauche, et bonnes propriétés.
Positionnement fixe
Un élément à position fixe est positionnée par rapport à la fenêtre du navigateur.
Il ne bougera pas, même si la fenêtre défile:
Remarque: IE7 et IE8 soutenir la valeur fixe que si un DOCTYPE est spécifié!.
Fixes des éléments positionnés sont retirés de l'écoulement normal. Le document et d'autres éléments se comportent comme l'élément fixe positionné n'existe pas.
Fixes des éléments positionnés peuvent se chevaucher d'autres éléments.
Positionnement relatif
Un élément par rapport positionné est positionnée par rapport à sa position normale.
Exemple
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Essayez vous-même »
Le contenu des éléments en position relative peut être déplacé et se chevauchent d'autres éléments, mais l'espace réservé à l'élément est encore conservé dans le flux normal.
Éléments en position relative sont souvent utilisés comme des blocs de conteneurs pour les éléments en position absolue.
Positionnement absolu
Un élément de position absolue est positionnée par rapport à l'élément parent a une première position autre que statique. Si aucun élément n'est trouvé, le bloc conteneur est <html>:
Éléments en position absolue sont retirés de la circulation normale. Le document et d'autres éléments se comportent comme l'élément en position absolue n'existe pas.
Éléments en position absolue peuvent se chevaucher d'autres éléments.
Éléments qui se chevauchent
Lorsque les éléments sont positionnés en dehors du flux normal, ils peuvent se chevaucher d'autres éléments.
La propriété z-index spécifie l'ordre d'empilage d'un élément (quel élément doit être placé devant ou derrière, les autres).
Un élément peut avoir un ordre de la pile positive ou négative:
Un élément d'ordre supérieur de pile est toujours en face d'un élément avec un ordre inférieur de la pile.
Remarque: Si deux éléments positionnés chevauchent, sans z-index spécifié, l'élément positionné dernière dans le code HTML sera affiché sur le dessus.
Exemples
Définir la forme d'un élément
Cet exemple montre comment définir la forme d'un élément. L'élément est encliqueté dans cette forme, et affichée.
Cet exemple montre comment définir la forme d'un élément. L'élément est encliqueté dans cette forme, et affichée.
Comment faire pour afficher de trop-plein dans un élément à l'aide de défilement
Cet exemple montre comment définir la propriété overflow pour créer une barre de défilement lorsque le contenu d'un élément est trop grand pour tenir dans une zone spécifiée.
Cet exemple montre comment définir la propriété overflow pour créer une barre de défilement lorsque le contenu d'un élément est trop grand pour tenir dans une zone spécifiée.
Comment configurer le navigateur pour traiter automatiquement de débordement
Cet exemple montre comment configurer le navigateur pour traiter automatiquement de débordement.
Cet exemple montre comment configurer le navigateur pour traiter automatiquement de débordement.
Changer le curseur
Cet exemple montre comment modifier le curseur.
Cet exemple montre comment modifier le curseur.
Toutes les propriétés de positionnement CSS
Le nombre dans le "CSS" colonne indique dans quelle version CSS la propriété est définie (CSS1 ou CSS2).
| Propriété | Description | Valeurs | CSS |
|---|---|---|---|
| bas | Définit le bord de la marge inférieure d'une boîte placée | automatique longueur %hériter | 2 |
| couper | Clips d'un élément en position absolue | formeautomatique hériter | 2 |
| curseur | Indique le type de curseur à afficher | urlauto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| à gauche | Définit le bord de la marge gauche pour une boîte positionnée | automatique longueur %hériter | 2 |
| débordement | Spécifie ce qui se passe si le contenu dépasse un élément de la boîte de | automatique cachée de défilement visible hériter | 2 |
| position | Spécifie le type de positionnement d'un élément | absolue fixe par rapport statique hériter | 2 |
| droit | Définit le bord de la marge à droite pour une boîte positionnée | automatique longueur %hériter | 2 |
| haut | Définit le bord de la marge supérieure pour une boîte positionnée | automatique longueur %hériter | 2 |
| z-index | Définit l'ordre de la pile d'un élément | Numéroautomatique hériter | 2 |
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT