Maison > Article > interface Web > Quels sont les modèles de positionnement en CSS ?

Quels sont les modèles de positionnement en CSS ?

零下一度original: 2017-06-24 14:00:371245parcourir

Modèle de positionnement 8 juin 2017 fanbright

css prend en charge 6 modèles de positionnement

statique
Absolu
Fixe
Relatif
Flottant
Flottant relatif

Définir la position

position:static Vous pouvez annuler le paramètre de positionnement de l'élément et le restaurer à sa position d'origine. Le mode d'affichage dans le flow.static régulier est la valeur par défaut.
position:relative; peut décaler la position de l'élément d'une certaine distance par rapport au flux régulier.
position:absolute; peut décaler l'élément d'une certaine distance par rapport à la position du flux régulier ou à la position de l'élément ancêtre positionné le plus proche.
position:fixed; peut définir le décalage relatif de l'élément à une certaine distance de la fenêtre
z-index peut définir l'ordre d'empilement des éléments. Plus la valeur est grande, plus l'élément est élevé. est

`最近定位祖先元素`

Si l'élément qui définit la position n'a pas d'élément ancêtre positionné, alors <body> devient l'élément ancêtre positionné. En d'autres termes, <body> est la position par défaut.
L'élément récemment positionné doit être un élément ancêtre valide (relatif|absolu|fixe). . CSS ne prend en charge le positionnement par rapport à aucun élément du document.
position:relative; est un très bon moyen de créer des éléments ancêtres positionnés car il ne quitte pas le flux régulier d'utilisation. cette méthode, vous pouvez créer une mise en page qui maintient un flux régulier et obtient un positionnement absolu

原子显示

L'élément avec une position définie est 原子显示, ce qui signifie qu'aucun élément externe ne peut le faire. apparaît entre ses descendants statiques, le contenu en ligne et l'arrière-plan. En utilisant le mode 相对定位,绝对定位和固定定位, vous pouvez définir l'élément à afficher de manière atomique. L'élément de niveau bloc défini sur overflow:scroll|auto est également affiché de manière atomique.

se chevauchera, mais

ne le sera pas. >边框和背景文字

s'applique à tous les éléments, l'auto

`z-index`

z-index par défaut n'est pas un attribut global, mais est déterminé par rapport au plus récent Élément ancêtre positionné avec un z-index de valeur numérique. L'élément racine html sera créé. Chaque élément positionné avec une valeur numérique z-index spécifiée crée un contexte d'empilement local

Les éléments positionnés statiques sont disposés d'arrière en avant dans l'ordre dans lequel ils apparaissent dans la pile du document.
La définition de l'élément de position ignore l'ordre dans lequel les éléments du document apparaissent. , mais les empile d'arrière en avant en fonction de la valeur de l'indice z, de petit à grand. Définition de la position des valeurs négatives. Les éléments sont situés sous les éléments positionnés statiquement et les éléments flottants non positionnés
Un modèle de positionnement statique

La position de départ de l'élément statique est déterminée ; par la position de l'élément statique précédent. Les éléments statiques
,
,

ensemble, et la marge finale est la
尺寸内边距边框Définissez les marges gauche et droite sur. auto pour centrer les 外边距 éléments de
合并较大值 Deux modèles de positionnement absolus
position:absolute;
已设定尺寸静态块级

Définissez la gauche, droite, haut, bas de l'élément sur
pour changer sa
position d'origine dans le flux régulier.

Contrairement aux éléments flottants, les éléments absolus ne seront pas automatiquement disposés. ne sera pas affecté par d'autres éléments, ni n'affectera d'autres éléments 百分数非父元素
auto恢复S'il n'y a pas d'élément ancêtre positionné, il se positionnera
avec un positionnement absolu. et centrage, éléments généraux
pour les éléments statiques en ligne, tels que em, strong, span, etc., mais n'inclut pas l'inline éléments remplaçables (input, img, textarea, etc.). Lors de l'utilisation du mode de positionnement absolu, la largeur et la droite peuvent être utilisées. Pour être centré, vous devez ajouter un 0 supplémentaire pour créer une marge : 0 auto ; Cela prend effet normalement.
Notez que seules la gauche et la droite

<body>

Trois modèles de positionnement fixes

 div{
            position:absolute;
            width:200px;
            height:200px;
            margin:0 auto;
            border:1px solid blue;
            /*left:0;*/ 这两条没用,没有影响
            /*right:0;*/
}

position:fixed; peut transformer n'importe quel élément en élément à position fixe

left:0;和right:0;
必须是0 Rappelez-vous : la position d'un élément à position fixe est relative à

, et

  #em{
            position:absolute;
            width:200px;
            height:200px;
            margin:0 auto;
            border:1px solid blue;
            left:0;
            right:0;
}

est relatif à l'ancêtre récemment positionné, et l'élément ne défilera pas lorsque la page défile.

Parce qu'il est positionné par rapport à la page, il est préférable d'utiliser haut et gauche pour le positionnement décalé lors du réglage de 不需要最近定位祖先
. gauche, bas, droite, les valeursde haut et gauche seront utilisées 优先 Seulement lorsque haut et gauche sont 不存在, bas et droite prendront effet

Quatre positionnements relatifs

position:relative;

Utilisez gauche et haut pour modifier la position de l'élément Gauche et haut. par défaut, auto, auto conservera les éléments positionnés de manière relative dans leur position d'origine dans le flux régulier.
Tout élément peut définir position:relative afin que ses éléments descendants positionnés de manière absolue puissent être positionnés de manière relative ; à lui.

Cinq positionnement et réinitialisation des flotteurs

Utilisez float:left et float:right pour que les éléments quittent le flux régulier.

Utilisez float:none ; la valeur par défaut est none, ce qui peut remplacer les autres règles flottantes de l'élément et éviter d'hériter des flottants
Les éléments flottants n'affecteront pas le niveau de bloc. La position de la boîte, mais n'affecteront que les éléments en ligne
clear:left;clear:right;clear;both;
N'importe quel élément peut être défini. Pour les éléments flottants, clear s'applique aux tables, aux éléments de niveau bloc et aux éléments flottants
clear ne s'applique pas à
, 行内 ou 绝对定位 éléments 固定定位

Six positionnements flottants relatifs

L'utilisation de float peut rendre certains éléments flottants. Les éléments flottants peuvent être définis sur un positionnement relatif. through relatif, et les éléments flottants relatifs sont toujours situés là où se trouvent les éléments flottants. Dans un flux régulier, vous pouvez utiliser left et top pour définir sa position de décalage dans le flux

En CSS, si le paramètre Si la valeur est 0, n'ajoutez pas d'unités

Avant de restituer le contenu d'un élément, le navigateur effectuera d'abord le rendu. son cadre. La commande commence par la couleur d'arrière-plan, puis l'image d'arrière-plan, puis la bordure. Enfin, le navigateur affichera le contenu de la boîte en haut de la boîte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de mise en page CSS du didacticiel Web front-endArticle suivant：Exemple de mise en page CSS du didacticiel Web front-end

Articles Liés

Voir plus

Quels sont les modèles de positionnement en CSS ?

Modèle de positionnement 8 juin 2017 fanbright

Définir la position

最近定位祖先元素

position:relative; est un très bon moyen de créer des éléments ancêtres positionnés car il ne quitte pas le flux régulier d'utilisation. cette méthode, vous pouvez créer une mise en page qui maintient un flux régulier et obtient un positionnement absolu

原子显示

z-index

position:fixed; peut transformer n'importe quel élément en élément à position fixe

Articles Liés

`最近定位祖先元素`

`原子显示`

`z-index`