Compréhension approfondie de la position en HTML5

La position du CSS est très importante. La position a un total de 4 valeurs d'attribut, qui sont les valeurs suivantes :

statique, relative, absolue, fixe. La position de l'élément

est spécifiée par les attributs "left", "top", "right" et "bottom", et le niveau d'affichage est contrôlé par z-index.

statique : positionnement statique. Si vous ne définissez pas l'attribut position, la valeur par défaut est statique. Les attributs tels que top, left, bottom et right ne sont pas valides lorsqu'ils sont statiques. Pour utiliser ces attributs, la position doit être définie sur l'une des trois autres valeurs.

relatif : l'élément relative  suit le flux normal du document, donc les éléments environnants n'ignoreront pas son existence. L'élément relative prend également en charge des attributs tels que top,bottom,left,right. Lorsque nous utilisons des attributs tels que top,bottom,left,right pour positionner relativement l'élément relative, l'effet est quelque peu similaire à l'effet obtenu par l'attribut margin, mais la différence est que les éléments autour de l'élément relative ignoreront l'attribut relative. mouvement de l'élément

# p 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}

absoluteabsolu : L'élément absolute sortira de la normale flux de documents, de sorte que les éléments qui l'entourent ignoreront son existence. Tout comme l'attribut display de l'élément none est défini sur top,bottom,left,right . À ce stade, nous pouvons utiliser des attributs tels que absolute pour positionner de manière absolue l'élément top 或 bottom,left 或 right. Généralement, deux attributs sont définis, .

# p 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}

fixe : Positionnement fixe. L'élément sera placé à une position fixe sur le navigateur et ne défilera pas avec d'autres éléments. Au sens figuré, lorsque la barre de défilement est tirée vers le haut ou vers le bas, la position de l'élément fixe sur l'écran ne change pas. Il convient de noter qu'IE6 ne prend pas en charge cet attribut.

fixedTout d'abord, le positionnement de l'élément window n'a rien à voir avec son élément parent. Il est toujours positionné par rapport à l'élément le plus à l'extérieur.
fixedDeuxièmement, l'élément est comme son nom. Il est fixé à une certaine position sur l'écran et ne disparaîtra pas en raison du défilement de l'écran.

# p 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}

L'attribut position est crucial dans la mise en page CSS. Une véritable compréhension de l'attribut position l'aura. être d'une grande aide pour apprendre p plus CSS à l'avenir

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!