Positionnement des éléments de CSS minuscules. Contenu de positionnement

Le positionnement est l'un des concepts clés de la mise en page. Compte tenu avec lui, vous deviendrez très clair pour vous et la mise en page du chamanisme se transformera en un processus significatif. Donc, l'article ira à propos des propriétés CSS positionner et flotter.

1. Position: statique

Par défaut, tous les éléments de la page ont un positionnement statique (position: statique), cela signifie que l'élément n'est pas positionné et apparaît dans le document à son endroit habituel, c'est-à-dire de la même manière que dans le balisage HTML.

Il n'est pas nécessaire d'attribuer spécifiquement cette propriété à un élément, sauf si vous devez modifier le positionnement précédemment installé pour la valeur par défaut.

#Content (position: statique;)

2. Position: relative

Positionnement relatif (position: relative) vous permet d'utiliser des propriétés: haut, bas, gauche et droite, pour l'emplacement de l'article par rapport à l'endroit où il apparaît avec un positionnement normal.

Déplacons #Content sur 20 pixels vers le bas et 40 pixels laissés:

#Content (position: relatif; top: 20px; gauche: -40px;)

Veuillez noter que sur le lieu où notre #Content doit être situé est maintenant un espace vide formé. Ensuite au bloc #Content, l'unité #footer n'a pas déménagé ci-dessous, car, #Content prend toujours sa place dans le document, malgré le fait que nous l'avons déplacé.

À ce stade, il peut sembler que le positionnement relatif n'est pas si utile, mais ne vous précipitez pas avec les conclusions, puis dans l'article, vous apprendrez ce qui peut être utilisé.

3. Position: absolu

Avec Positionnement absolu (Position: Absolute), l'article est supprimé du document et apparaît où vous lui dites.

Par exemple, déplacez le bloc # div-1a vers le coin supérieur et droit de la page:

# Div-1a (position: absolu; top: 0; droite: 0; largeur: 200px;)

Veuillez noter que cette fois, puisque le bloc # Div-1a a été supprimé du document, les éléments restants de la page sont différents: # div-1b, # div-1c et #footer déplacé ci-dessus, à la place du bloc distant . Et le bloc # div-1a elle-même est avec précision dans la droite, coin supérieur de la page.

Ainsi, nous pouvons positionner n'importe quel élément par rapport à la page, mais cela ne suffit pas. En fait, nous devons positionner # div - 1a par rapport au bloc parent #Content. Et à ce stade, le positionnement relatif entra à nouveau dans le jeu.

4. Position: fixe

Position fixe (position: fixe) est une sous-section de positionnement absolu. La seule différence est qu'elle est toujours dans la zone visible de l'écran et ne bouge pas lors du rouleau de la page. À cet égard, il est un peu similaire à une image de fond fixe.

# Div-1a (position: fixe; haut: 0; droite: 0; largeur: 200px;)

Dans IE avec position: fixe n'est pas aussi lisse, peu importe la façon dont je voulais, mais il y a plusieurs façons Contourner ces restrictions.

5. Position: Relative + Position: Absolute

Après avoir assigné une unité de positionnement relatif # Content, nous pouvons positionner tous les éléments enfants par rapport à ses frontières. Placons un bloc # Div-1a, dans le coin supérieur droit du bloc #Content.

#Csolute (position: absolu; top: 0; droite: 0; largeur: 200px;)

6. Deux colonnes

Armé de connaissances des étapes précédentes, vous pouvez essayer de faire deux colonnes en utilisant un positionnement relatif et absolu.

#Csolute; top: 0; droite: 0; largeur: 200px;) # div-1b (position: absolu; TOP: 0; gauche: 0; largeur: 200px;)

L'un des avantages du positionnement absolu est la possibilité de placer des éléments dans un ordre arbitraire, quel que soit leur emplacement dans le balisage. Dans l'exemple ci-dessus, le bloc # div-1b est situé avant le bloc # div-1a.

Et maintenant, vous deviez avoir une question: "Mais où sont les éléments restants de notre exemple?". Ils ont disparu sous des blocs absolument localisés. Heureusement, il est possible de le réparer.

7. Deux colonnes avec une hauteur fixe

Une solution consiste à définir une hauteur fixe d'un conteneur contenant des colonnes.

#Content: 450px;) # Div-1a (position: absolue; haut: 0; droite: 0; largeur: 200px;) # div-1b (position: absolu; haut: 0; gauche: 0; largeur: 0; largeur: 200px;)

La solution n'est pas très appropriée, car nous ne savons jamais à l'avance comment le texte sera situé dans les colonnes et quelle police sera utilisée.

8. Flotter.

Pour les haut-parleurs avec une hauteur variable, positionnement absolu Cela ne convient pas, alors considérons une autre option.

En nommant l'unité de flottement, nous l'appuierons plus probablement à la droite (ou à gauche), et le texte à côté du bloc le luttera. Habituellement, cette technique est utilisée pour des images, mais nous l'utiliserons pour une tâche plus complexe, car il s'agit du seul outil disponible à notre disposition.

# Div-1a (flotteur: gauche; largeur: 200px;)

9. Colonnes "flottantes"

Si vous affectez Float: laissé à la première unité, puis le deuxième flotteur: à gauche, chacun des blocs s'adaptera au bord gauche, et nous aurons deux colonnes avec une hauteur variable.

# Div-1a (flotteur: gauche; largeur: 150px;) # div-1b (flotteur: gauche; largeur: 150px;)

De plus, vous pouvez affecter des colonnes comme opposées à la valeur du flotteur, dans ce cas, elles seront distribuées le long des bords du conteneur.

# Div-1a (flotteur: droite; largeur: 150px;) # div-1b (flotteur: gauche; largeur: 150px;)

Mais maintenant, nous avons un autre problème - les colonnes vont au-delà du conteneur parent, brisant ainsi toute la mise en page. C'est le problème le plus courant des versions novices, bien qu'elle soit résolue tout simplement.

10. Nettoyer le flotteur.

Le nettoyage flotté peut être fait de deux manières. Si, après les colonnes, il y a un autre bloc, il suffit d'assigner clairement à lui: les deux.

# Div-1a (flotteur: gauche; largeur: 190px;) # div-1b (flotteur: gauche; largeur: 190px;) # div-1c (clair: les deux;)

Ou attribuer la propriété de débordement au conteneur parent: caché

#Content (débordement: caché;)

En tout état de cause, le résultat sera le même.

Conclusion

Aujourd'hui, seules les techniques de positionnement de base étaient considérées et le plus exemples simples. Aussi, pour aider les fabricants de novices, je recommande toujours le cycle des articles Ivan Sagalaeva, qui m'a beaucoup aidé beaucoup.

Dernière mise à jour: 04/28/2016

CSS fournit des fonctionnalités sur le positionnement de l'article, c'est-à-dire que nous pouvons mettre un élément dans un certain endroit sur la page.

La propriété principale qui contrôle le positionnement dans CSS est la propriété de position. Cette propriété peut prendre l'une des valeurs suivantes:

statique: positionnement standard de l'élément, valeur par défaut

absolu: l'élément est positionné par rapport aux limites de l'élément de conteneur, si cette propriété n'est pas égale à statique

relative: L'élément est positionné par rapport à sa position par défaut. En règle générale, l'objectif principal du positionnement relatif n'est pas de déplacer l'élément, mais de définir le nouveau point de liaison pour le positionnement absolu des éléments investis.

correction: L'élément est positionné par rapport à la fenêtre de brasier, il vous permet de créer des éléments fixes qui ne changent pas la position lors du défilement

Vous ne devez pas appliquer simultanément la propriété Float à l'élément et à tout type de positionnement, à l'exception statique (c'est-à-dire le type par défaut).

Positionnement absolu

La zone de visualisation du navigateur présente des bords supérieur, inférieur, droit et gauche. Pour chacun de ces quatre bords, il existe une propriété CSS appropriée: laissée à gauche (indentation du bord de gauche), droite (indentement du bord de la droite), haut (indentement du bord du conteneur d'en haut) et le bas (récession ci-dessous). Les valeurs de ces propriétés sont indiquées en pixels, EM ou pourcentage. Il n'est pas nécessaire de définir des valeurs pour les quatre côtés. En règle générale, seules deux valeurs sont installées - indentation du bord supérieur du haut et de l'indentation du bord gauche de gauche.

Bonjour le monde

Ici, l'élément div avec positionnement absolu sera de 100 pixels à gauche de la zone de visualisation et 50 ci-dessous.

Ce n'est pas si important que, après que cet élément divigne d'autres éléments. le bloquer div. Dans tous les cas, il sera positionné par rapport aux limites de la zone de visualisation du navigateur.

Si un élément de positionnement abnotique est situé dans un autre conteneur, dans lequel, à son tour, la valeur de la propriété de position n'est pas égale à statique, l'élément est positionné par rapport aux limites du conteneur:

Positionnement relatif

Le positionnement relatif est également défini à l'aide de la valeur relative. Pour spécifier une position spécifique sur laquelle l'élément est décalé, les mêmes propriétés de haut, gauche, droite, en bas sont appliquées:

Propriété Z-Index

Par défaut, lorsque les deux éléments des limites sont coïncidés, un élément défini sur un marquillage HTML est affiché sur un autre. Cependant, la propriété Z-Index vous permet de modifier l'ordre des éléments lorsqu'il est superposé. En tant que valeur, la propriété prend le numéro. Les éléments avec une valeur importante de cette propriété seront affichés sur les éléments avec peu de sens z-index.

Par example:

Ajoutez maintenant une nouvelle règle au style Block RedBlock:

RedBlock (Z-Index: 100; Position: absolu; Top: 20px; gauche: 50px; largeur: 80px; hauteur: 80px; couleur-couleur: rouge;)

Ici, Z-Index est 100. Mais cela ne doit pas nécessairement être le numéro 100. Le deuxième bloc de z-index de z n'est pas défini et est en réalité zéro, alors pour redémarrage, nous pouvons définir une valeur de zéro sur les propriétés de z-index.

Et maintenant, le premier bloc sera superposé au second, et pas le contraire, comme il était au début.

Imaginez que le développeur Web n'a pas besoin de penser à la façon dont une page à l'emploi visuelle ressemblera. Il écrit juste le code, les éléments eux-mêmes sont alignés sur la page, de haut en bas (bloc) et de gauche à droite (minuscules). Plus le document est élevé est écrit sur le document, plus il sera élevé sur la page.

En général, nous verrons le comportement naturel des éléments et l'ordre de leur affichage sur la page de flux de documents. Mais nous ne sommes pas du tout adaptés à un tel ordre, nous voulons placer le logo dans le coin supérieur gauche et le bouton est légèrement correct. Nous avons besoin d'un contrôle complet sur tous les éléments, nous décidons où et ce qui sera. Et pour cela, vous avez besoin d'un outil (propriété), modifiant le comportement habituel des éléments dans le flux. Quelle est cette propriété?

DANS CSS. styles il s'appelle positionnement Positionner)qui peut être ordinaire (statique)relatif (Relatif) et absolu (Absolu).

Positionnement relatif dans CSS

Pour positionnement relatifL'unité se déplace par rapport à sa position initiale. Cependant, le bloc de parole:

Position: relatif;

rien ne se passera, il restera en place. Et déplace le système de coordonnées de blocs (Haut, bas, gauche, à droite)Avec des valeurs positives et négatives.

Comment ça fonctionne?

À l'intérieur d'un bloc jaune avec une classe jaune Il y a un bloc rouge avec classe relatif de blocage.. Dans le flux habituel, le bloc rouge chevauche le jaune, comme il est prescrit dans le code en dernier.

Nous devons déplacer le bloc rouge sur 10 pixels. Cela peut être fait uniquement en modifiant violemment la position du bloc rouge. Nous écrivons top: 10px.Mais vous devez spécifier, de quoi compter ces 10 pixels?

Presistat position: relatif.Nous pouvons clairement comprendre ce qu'il faut compter par rapport à sa position actuelle.

Bloc-jaune (
Couleur de fond: # ffe70f;
}

Relatif-bloc-relatif (
Position: relatif;
TOP: 10PX;
Couleur de fond: # ED5B77;
}

Dans l'image, nous voyons comment le bloc rouge est descendu, 10 pixels vers le bas, de sa position initiale.

Si vous supprimez du code position: relatif.Le bloc restera en place. Et si à la place relatif., Écrivez absolu., Par défaut, le compte à rebours de ces 10 pixels sera effectué à partir du bord de la fenêtre du navigateur et, éventuellement, notre bloc sera confronté, tirant jusqu'au bord inférieur du navigateur. Et ce n'était pas dans nos plans.

Positionnement absolu dans CSS

Dans l'image du bloc positionné absolumentCeci est lorsque le comptage du système de coordonnées est effectué à partir du bord du navigateur, remplaçant un seul mot, nous avons modifié la position du bloc.

Position: absolu;

Il y a une fonctionnalité. Positionnement absolu Il affecte les éléments minuscules. Si l'élément de ligne est défini position: absolu., il se comportera comme un bloc. Ceci est une propriété analogique - bloc de visualisation..

Ce n'est pas tout, l'élément "absolu" situé à l'intérieur du parent "relatif", change son point de référence aux coordonnées et commence à être positionné du parent.

Bloc avec classe bloc-absolu. être à l'intérieur du parent jaune.

Bloc-jaune (
Position: relatif;
Rembourrage: 10px;
Couleur de fond: # ffe70f;
}

Puisque le bloc jaune a positionnement relatif, alors le bloc rouge avec positionnement absolu, passe relativement rouge sur les pixels spécifiés.

Bloc-absolu (
Position: absolu;
Bas: 10px;
À gauche: 10px;
Couleur de fond: # ED5B77;
}

Positionnement fixe

Lors du défilement du bloc de la page avec position: fixerestera en place, cette méthode est généralement utilisée pour fixer le panneau de navigation.

z-index.

Frotte l'ordre de se chevaucher des blocs "absolus". Nous avons besoin du bloc rouge pour être au-dessus de jaune, puis nous indiquons z-index: 2 pour le rouge et z-index: 1 pour jaune.

Block-rouge (
Position: relatif;
z-index: 2;
Couleur de fond: # ffe70f;
}

Block-yelow (
Position: absolu;
TOP: 20PX;
z-index: 1;
Couleur de fond: # ED5B77;
}

Comme vous le savez probablement probablement déjà, vous pouvez télécharger le site à l'aide des tables, dans ce cas, la page est divisée en cellules. Et vous pouvez utiliser des blocs à ces fins lorsque la page Site comprend des éléments individuels.

Probablement, je ne me tromperai pas si je dis cela avec un problème grave pour de nombreux webmasters novices, la tâche consiste à localiser des blocs dans un emplacement spécifié de la page Web.

L'une des principales difficultés de la mise en page à l'aide de blocs est le positionnement (alignement) de ces unités.

Un peu sur les couches (couches)

Je pense que beaucoup d'entre vous ont entendu parler d'une si une couche (couche). Et, en règle générale, sous la couche est comprise par le bloc spécifié par la balise