Corrigez la position d'un calque en définissant l'attribut position dans les astuces CSS_javascript

Définition et usage

L'attribut position spécifie le type de positionnement de l'élément.

Description

Cet attribut définit le mécanisme de positionnement utilisé pour établir la disposition de l'élément. N'importe quel élément peut être positionné, mais les éléments absolus ou fixes génèrent une boîte au niveau du bloc, quel que soit le type de l'élément lui-même. Un élément positionné relativement est décalé par rapport à sa position par défaut dans un écoulement normal.

默认值：	static
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

Exemple

Positionnement des éléments h2 :

h2
 {
 position:absolute;
 left:100px;
 top:150px;
 }
TIY

Prise en charge du navigateur

Tous les principaux navigateurs prennent en charge l'attribut position.

Remarque : La valeur de l'attribut « inherit » n'est prise en charge dans aucune version d'Internet Explorer (y compris IE8).

Valeurs possibles

Exemple TIY

valeur

Description

absolu

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

Génère un élément en position absolue, positionné par rapport au premier élément parent autre que le positionnement statique.

La position de l'élément

est spécifiée via les attributs "left", "top", "right" et "bottom".

corrigé

Générer un élément positionné de manière absolue, positionné par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

relatif

Génère un élément relativement positionné, positionné par rapport à sa position normale.

Donc "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.

statique

Valeur par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index).

hériter

spécifie que la valeur de l'attribut position doit être héritée de l'élément parent.

Positionnement : Positionnement relatif Cet exemple montre comment positionner un élément par rapport à sa position normale. Positionnement : positionnement absolu Cet exemple montre comment positionner un élément à l'aide de valeurs absolues. Positionnement : positionnement fixe Cet exemple montre comment positionner un élément par rapport à la fenêtre du navigateur. Définition de la forme d'un élément Cet exemple montre comment définir la forme d'un élément. L'élément est découpé dans la forme et affiché. Z-indexZ-index peut être utilisé pour placer un élément derrière un autre élément. Z-index L'élément dans l'exemple ci-dessus a vu son Z-index modifié.

Laissez-moi vous présenter l'attribut Position en CSS

La position CSS est très importante et a les valeurs suivantes : statique, relative, absolue, fixe.

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>

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 : positionnement relatif. L'élément s'ajustera à la position dans laquelle il se trouvait lorsqu'il était positionné statiquement. L'espace alloué à l'élément en positionnement statique lui sera toujours alloué. Les éléments de chaque côté ne se rapprocheront pas de lui pour remplir cet espace, mais ils ne bougeront pas non plus de la nouvelle position de l'élément étant repoussés. Absolu : Positionnement absolu. L'élément sera positionné par rapport à l'élément conteneur. Par exemple, s'il est imbriqué dans un autre élément positionné de manière absolue, il sera positionné par rapport à cet élément. 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. Remarque : De nombreuses pages Web sont centrées. De cette façon, lorsque les éléments sont positionnés de manière absolue, il y aura des écarts dans l'affichage à différentes résolutions. Dans ce cas, nous pouvons le gérer via une méthode similaire à la suivante :