Quels sont les modèles de positionnement en CSS ?
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 suroverflow:scroll|autoest é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
ne le sera pas. >边框和背景文字
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 statiqueset,
,
- 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 surpour 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
Notez que seules la gauche et la droite0supplémentaire pour créer une marge : 0 auto ; Cela prend effet normalement. fonctionnent ici -
Trois modèles de positionnement fixes<body>div{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; /*left:0;*/ 这两条没用,没有影响 /*right:0;*/ }Copier après la connexionposition:fixed; peut transformer n'importe quel élément en élément à position fixe
, etleft:0;和right:0;必须是0Rappelez-vous : la position d'un élément à position fixe est relative àest relatif à l'ancêtre récemment positionné, et l'élément ne défilera pas lorsque la page défile.#em{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; left:0; right:0; }Copier après la connexion 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
- 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Comment supprimer le style par défaut dans la liste Bootstrap?
Apr 07, 2025 am 10:18 AM
Le style par défaut de la liste bootstrap peut être supprimé avec CSS Override. Utilisez des règles et sélecteurs CSS plus spécifiques, suivez le «principe de proximité» et le «principe de poids», en remplacement du style par défaut de bootstrap. Pour éviter les conflits de style, des sélecteurs plus ciblés peuvent être utilisés. Si le remplacement est infructueux, ajustez le poids du CSS personnalisé. Dans le même temps, faites attention à l'optimisation des performances, évitez la surutilisation de! Importante et écrivez le code CSS concis et efficace.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment construire un framework bootstrap
Apr 07, 2025 pm 12:57 PM
Pour créer un framework bootstrap, suivez ces étapes: Installez Bootstrap via CDN ou installez une copie locale. Créez un document HTML et liez Bootstrap CSS à & lt; head & gt; section. Ajoutez un fichier JavaScript bootstrap au & lt; body & gt; section. Utilisez le composant bootstrap et personnalisez la feuille de style en fonction de vos besoins.
Comment disposer bootstrap
Apr 07, 2025 pm 02:24 PM
Pour utiliser Bootstrap pour disposer d'un site Web, vous devez utiliser un système de grille pour diviser la page en conteneurs, lignes et colonnes. Ajoutez d'abord le conteneur, puis ajoutez les lignes dedans, ajoutez les colonnes dans la ligne et enfin ajoutez le contenu dans la colonne. La fonction de mise en page réactive de Bootstrap ajuste automatiquement la disposition en fonction des points d'arrêt (XS, SM, MD, LG, XL). Différentes dispositions sous différentes tailles d'écran peuvent être réalisées en utilisant des classes réactives.
Comment régler la barre de navigation bootstrap
Apr 07, 2025 pm 01:51 PM
Bootstrap fournit un guide simple pour configurer les barres de navigation: l'introduction de la bibliothèque bootstrap pour créer des conteneurs de barre de navigation Ajouter l'identité de marque Créer des liens de navigation Ajouter d'autres éléments (facultatif) Styles d'ajustement (facultatif)
Comment télécharger des fichiers sur bootstrap
Apr 07, 2025 pm 01:09 PM
La fonction de téléchargement de fichiers peut être implémentée via Bootstrap. Les étapes sont les suivantes: introduire les fichiers Bootstrap CSS et JavaScript; créer des champs d'entrée de fichier; créer des boutons de téléchargement de fichiers; gérer les téléchargements de fichiers (à l'aide de FormData pour collecter des données, puis envoyer au serveur); style personnalisé (facultatif).
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
