Propriétés inset

En CSS, les propriétés inset contrôlent la position des éléments positionnés en spécifiant des décalages par rapport à leur position par défaut. Il existe des propriétés inset physiques, logiques et des raccourcis.

Les propriétés inset incluent les propriétés physiques top, left, bottom et right, leurs équivalents relatifs au flux : inset-block-start, inset-block-end, inset-inline-start, inset-inline-end (propriétés logiques), ainsi que les raccourcis inset-block, inset-inline et inset.

Les propriétés physiques font référence à des côtés physiques spécifiques d'un élément. Les propriétés logiques utilisent des mots-clés directionnels relatifs aux axes de bloc et d'inline. L'axe de bloc correspond à l'axe qui définit l'ordre d'empilement des éléments dans une disposition en bloc. L'axe d'inline est perpendiculaire à l'axe de bloc et représente la direction dans laquelle le contenu en ligne, comme le texte, s'écoule dans un bloc. La correspondance dépend des propriétés writing-mode, direction et text-orientation de l'élément.

L'interprétation des propriétés inset dépend de la valeur de la propriété position. Lorsque position: absolute est utilisé, elles représentent les décalages depuis le bloc englobant ou l'élément d'ancrage. Avec position: relative, elles représentent les décalages depuis la position par défaut du bord de la marge de la boîte. Avec sticky, elles représentent les décalages depuis le bord du conteneur de défilement. La valeur fixed est similaire à absolute, sauf que l'élément est positionné et dimensionné par rapport à son bloc de positionnement fixe, qui est souvent la zone d'affichage (viewport en anglais).