Maison > Article > interface Web > 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 }
absolute
absolu : 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.
fixed
Tout 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. fixed
Deuxiè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!