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;     
 }

6.clear:both Clear floats

Parfois, le positionnement s'effondre, c'est-à-dire que l'élément enfant est dans l'élément parent, mais la taille de l'élément parent ne suivra pas l'élément enfant La taille de l'élément est "" développée ", ce qui entraîne l'effet d'effondrement de l'élément parent. Ce bug se produit parce que l'élément enfant définit l'attribut float, provoquant l'effondrement de l'élément parent. Pour résoudre ce bug, vous avez besoin pour définir l'élément parent sur l'élément parent. Définissez clear float L'exemple de code est le suivant :

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;     
 }