recherche

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

Quels sont les modèles de positionnement en CSS ?

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

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.

    • et l'élément statique au niveau du bloc sans position définie. Lorsqu'un chevauchement se produit, leur contenu en ligne ne se chevauchera pas, mais leur
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

    • position:static; la valeur par défaut est 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

,

,
et
    sont déterminés. La position de départ de l'élément suivant. Les marges verticales des éléments adjacents seront
  • 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;

    已设定尺寸静态块级

    • est relatif à la taille de l'élément ancêtre positionné le plus récemment, tandis que la taille de
.

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 百分数非父元素

    • Si l'ensemble d'un élément Si les éléments enfants sont tous définis sur un positionnement absolu, alors sa hauteur deviendra , et tous ses éléments enfants quitteront le flux régulier

  • auto恢复S'il n'y a pas d'élément ancêtre positionné, il se positionnera

    • selon
  • avec un positionnement absolu. et centrage, éléments généraux

    • avec positionnement et centrage absolus, éléments statiques en ligne

  • 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
    • fonctionnent ici

  • <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 valeurs​​de 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

    Seules positon:relative; et position:static; sont applicables aux éléments flottants Lorsqu'ils sont définis sur absolu et fixes, le résultat d'affichage est incertain. 🎜>

  • 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