Comment utiliser la position CSS

Nous utilisons souvent position pour un positionnement absolu hiérarchique, alors comment maîtriser habilement l'attribut position avec CSS ? Aujourd'hui, nous sommes ici pour l'étudier avec vous.

syntaxe et structure de position

syntaxe de position :

position : statique absolu relatif

paramètres de position :

statique : Il n'y a pas de positionnement spécial. L'objet suit les règles de positionnement HTML

absolu : faites glisser l'objet hors du flux de documents et utilisez les attributs gauche, droite, haut, bas et autres pour un positionnement absolu. Et sa cascade est définie via l'attribut css z-index. Pour le moment, l'objet n'a pas de marges, mais il y a toujours un remplissage et des bordures

relatives : l'objet ne peut pas être empilé, mais sera décalé dans le flux normal du document en fonction de la gauche, de la droite, du haut et du bas. et d'autres attributs

Description de la position :

Définissez la méthode de positionnement de l'objet, ce qui peut rendre le calque de mise en page facile à positionner de manière absolue et contrôler l'objet boîte avec plus de précision.

L'utilisation réelle de la position

La position de positionnement absolue est utilisée pour positionner les objets de la boîte. Parfois, il y a plusieurs petits objets dans une mise en page, et il n'est pas facile d'utiliser du padding et marge CSS pour le positionnement relatif. À l'heure actuelle, nous pouvons utiliser le positionnement absolu pour le faire facilement. Surtout pour la disposition irrégulière de plusieurs petites boîtes dans une boîte, il est très pratique pour nous d'utiliser le positionnement absolu pour disposer les objets à ce moment-là.

La démonstration de la position de positionnement absolu convient aux images et aux dispositions irrégulières. Vous pouvez utiliser position:absolute;position:relative pour le positionnement absolu

Le positionnement absolu et le flotteur ne peuvent pas être utilisés en même temps, par exemple. comme une grande boîte Certains d'entre eux sont un positionnement absolu, et certains utilisent un positionnement flottant css float. De cette façon, le navigateur IE6 n'affichera pas ces positionnements absolus et relatifs dans l'objet modifié. Cela peut également être considéré comme IE6 CSS HACK. Faites juste attention à ne pas les mélanger.

Conditions d'utilisation du positionnement absolu

position:absolute; position:relativeL'utilisation du positionnement absolu est généralement le parent définit position:relative positionnement, l'enfant définit l'attribut position:absolute Absolute Positioning et le l'enfant utilise la gauche ou la droite et le haut ou le bas pour effectuer un positionnement absolu.

.div{position:relative} définition, il est généralement préférable de définir la largeur CSS et la hauteur CSS

.div-a{position:absolute;left:10px;top:10px} définie ici La distance depuis le côté gauche du parent est de 10 px et la distance depuis le haut du parent est de 10 px

ou

.div-a{position:absolute;right:10px; bottom:10px} défini ici La distance à droite du parent est de 10px, et la distance jusqu'au bas du parent est de 10px

correspondant à la structure HTML

<div class="div">
    <div class="div-a"></div>
</div>

De cette façon , "div-a" est positionné de manière absolue dans le parent "div" "À l'intérieur de la boîte.

Notez que gauche (gauche) et droite (droite) ne peuvent choisir qu'une seule définition pour un objet, et que bas (en bas) et haut (en haut) ne peuvent également choisir qu'une seule définition pour un objet.

Cas d'application de position

Voici un exemple d'application du positionnement absolu de position. Nous définissons la bordure CSS d'une boîte la plus externe sur rouge, la largeur CSS sur 400 px, la hauteur CSS sur 200 px et l'intérieur. contient 2 Afin d'utiliser le positionnement absolu pour ces deux cases, le nom CSS de la première case est "div-a", sa largeur est de 100px, la couleur de fond est noire, la hauteur est de 100px, la distance de positionnement est de 10px du parent, et la distance à partir de la gauche est de 10px ; la deuxième classe CSS de boîte est nommée "div-b", sa largeur et sa hauteur sont respectivement de 50px, la couleur

css background est bleue, la distance depuis le bas de le parent mesure 13 px et la distance depuis la droite du parent est de 15 px.

1. Le code CSS est le suivant

<style> 
.div{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divc-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */ 
.div-b{ position:absolute;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */ 
</style>

extrait de code HTML

<div class="div"> 
    <div class="div-a"></div> 
    <div class="div-b"></div> 
</div>

Il existe de nombreuses façons d'utiliser l'attribut position de CSS Friends who. si vous en avez besoin, vous pouvez le sauvegarder. Veuillez également continuer à prêter attention aux autres mises à jour sur ce site.

Lecture connexe :

Quelques exemples de petites fonctions réalisées avec du CSS pur

Annotations de balises de lien couramment utilisées en HTML

Pourquoi parfois le CSS DIV ne parvient pas à se charger

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!