Techniques de positionnement CSS

Cet article explore 6 propriétés CSS couramment utilisées. Tout le monde sera satisfait de cet article.

1.position:static

L'attribut statique est la valeur par défaut de la position, c'est-à-dire lorsqu'un élément n'a pas d'attribut de position défini pour il, Sa valeur par défaut 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 à l'attribut position qui n'est pas défini. la position se déplace vers le bas de 100px. La définition de la valeur d'attribut relative est un tel mode de positionnement.

4.position:fixe

le positionnement fixe n'est pas beaucoup utilisé, mais il est très adapté à la production de pièces en mode fixe, 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 la combinaison des deux pour implémenter une disposition à deux colonnes ;

<span style="white-space:pre">    </span>#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 : les deux flotteurs clairs

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 changera pas. L'élément enfant est "" développé " en fonction de la taille de l'élément enfant, 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 devez définir un flotteur clair pour l'élément parent. L'exemple de code est le suivant :

Ce qui précède concerne l'apprentissage des six propriétés couramment utilisées dans. Positionnement CSS. J'espère que cela sera utile à tout le monde

<span style="white-space:pre">    </span>    #p-1a {     
             float:left;     
             width:190px;     
            }     
            #p-1b {     
             float:left;     
             width:190px;     
            }     
            #p-1c {     
             clear:both;     
            }

Pour plus d'articles liés aux techniques de positionnement CSS, veuillez faire attention au site Web PHP chinois

.