Quelques points clés dans l'utilisation de la propriété position positionnement de CSS

1.position:static

L'attribut statique est la valeur par défaut de position, c'est-à-dire lorsqu'un élément n'a pas d'attribut de position défini pour lui. , sa valeur par défaut est La valeur est statique.

2.position:absolute
Il s'agit d'une valeur d'attribut de position fréquemment utilisée. Si absolu est défini pour un élément, l'élément est séparé du flux de documents d'origine. Pour le dire plus graphiquement, par exemple, si l'élément a est défini avec position:absolute, alors cet élément n'aura pas de relation de position avec les autres éléments de la page, mais flottera au-dessus de la page entière. Les changements de position, de taille, etc. d'autres éléments sur la page n'affecteront pas la position de l'élément a, ce qui équivaut à un élément extérieur.

3.position:relative
relative est la méthode de définition la plus utile. La définition de l'attribut relatif indique le changement de l'élément par rapport à sa position d'origine. Par exemple, nous définissons un élément b et lui définissons le style CSS suivant :

#b{     
    position: relative;     
    width:100px;     
    height:100px;     
    top:100px;     
}

L'élément b défini par ce code est positionné par rapport à la position définissant la position l'attribut se déplace vers le bas de 100 px. La définition de la valeur d'attribut relative est un tel mode de positionnement.

4.position:fixed
Le positionnement fixe n'est pas beaucoup utilisé, mais il est très adapté à la production partielle de motifs fixes, comme le menu supérieur. Après avoir défini l'attribut fixe, la position de l'élément ne changera avec aucun comportement.

5. Position relative
Utiliser ces deux positions en même temps est une technique très courante, et les novices peuvent également rencontrer ici beaucoup de problèmes. De manière générale, si un élément est positionné de manière absolue, sa référence est basée sur le fait que l'élément le plus proche de lui soit défini sur un positionnement relatif. S'il existe un paramètre, il sera positionné comme l'élément le plus proche de lui-même. Sinon, il aura l'air. à ses éléments ancêtres pour les éléments relativement positionnés jusqu'à ce que le HTML soit trouvé. Par exemple, le code suivant utilise une combinaison des deux pour implémenter une disposition à deux colonnes pour un positionnement absolu :

#p-1
 {     
             position:relative;     
}     
            #p-1a
 {     
             position:absolute;     
             top:0;     
             rightright:0;     
             width:200px;     
}     
            #p-1b 
{     
             position:absolute;     
             top:0;     
             left:0;     
             width:200px;     
 }

Pour des articles plus pertinents sur l'utilisation de. Attributs de positionnement CSS, veuillez faire attention au site Web PHP chinois

#p-1a 
{     
             float:left;     
             width:190px;     
 }     
            #p-1b
 {     
             float:left;     
             width:190px;     
 }     
            #p-1c
 {     
             clear:both;     
 }