Les deux façons de dimensionner les éléments absolus dans CSS

Quiconque a utilisé CSS pendant un certain temps connaîtra les mérites du positionnement absolu et relatif. Pour récapituler: Position: relative permet à un élément d'être déplacé de sa position d'origine horizontalement (en utilisant la gauche ou la droite) ou verticalement (en utilisant le haut ou le bas). Position: Absolut permet à un élément d'être positionné par rapport à un bloc contenant en utilisant la gauche, la droite, le haut ou le bas (Le bloc contenant est le nœud d'ancêtre le plus proche avec une position de relative, absolue ou fixe). Les nœuds de positionnement sont donc simples, par ex. HTML:

<div >
	<div ></div>
</div>

CSS:

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

(La largeur et la hauteur réelles du bloc intérieur seront de 100px en raison de l'ajout de la bordure). Les boîtes suivantes sont rendues dans chaque navigateur moderne (y compris IE6):   Moins connu est que vous pouvez appliquer tout le gauche, la droite, le haut et le bas propriétés en même temps. Le CSS suivant rendra l'élément intérieur de manière identique:

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

La largeur et la hauteur de la boîte intérieure resteront 100px, mais nous n'avons pas besoin de devoir définir explicitement les dimensions. Cela pourrait être utile lorsque:

• L'espacement autour de l'élément est plus critique que la largeur ou la hauteur. Vous pouvez également utiliser des propriétés négatives à gauche, à droite, supérieure et / ou inférieure pour rendre la boîte intérieure plus grande que son parent extérieur.
• Vous avez plusieurs éléments internes avec des bordures et un rembourrage différents, mais vous avez besoin d'espacement extérieur cohérent. Cette méthode vous permet de créer un seul style pour tous ces éléments.

Les animations JavaScript peuvent également en bénéficier car il peut être plus facile et plus rapide de redimensionner un élément si vous n'avez pas besoin de calculer la largeur et la hauteur résultantes, par exemple

// expands and contracts the inner box
window.onload = function() {

	var inner = document.getElementById("inner");
	var offset = 100, dir = -1;
	setInterval(function() {
		inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
		offset += dir;
		if (offset == 0 || offset == 100) dir = -dir;
	}, 10);
	
}

Une note sur la compatibilité du navigateur: cette technique fonctionne dans tous les navigateurs principaux, sauf ie6 qui ne comprend que des largeurs et des hauteurs explicites. Il y a une surprise!

Questions fréquemment posées (FAQ) sur le dimensionnement CSS et le positionnement absolu

Quelle est la différence entre le positionnement absolu et relatif dans CSS?

Dans CSS, absolument et relatif sont deux types de méthodes de positionnement. Le positionnement absolu permet de positionner un élément par rapport à l'ancêtre positionné le plus proche. Cela signifie que l'élément est retiré du flux normal du document et qu'aucun espace n'est créé pour l'élément de la disposition de la page. D'un autre côté, le positionnement relatif permet à un élément d'être positionné par rapport à sa position normale. Cela signifie que le positionnement est relatif à la position d'origine de l'élément dans l'écoulement du document, et l'espace est toujours conservé pour cela dans la mise en page.

Comment fonctionne la propriété «Position: Absolute» dans CSS?

La propriété «Position: Absolute» dans CSS supprime un élément du flux de document normal et le positionne à une position spécifiée par rapport à son ancêtre positionné le plus proche ou au bloc de contenu initial. L'élément positionné peut être déplacé à l'aide des propriétés «haut», «droite», «bas» et «gauche». Cependant, si aucun élément ancêtre n'a de position autre que «statique», le bloc de contenu initial est utilisé à la place.

Quelle est l'utilisation de «top», «droite», «en bas» et «gauche» dans les propriétés CSS?

Les propriétés CSS sont utilisées pour positionner un élément. Ces propriétés n'ont que des effets sur les éléments positionnés. Ils spécifient la distance entre l'élément et un ou plusieurs côtés de son élément contenant. Par exemple, «en haut: 20px» signifie que le bord supérieur de l'élément sera à 20px du bord supérieur de son élément contenant.

Comment puis-je centrer un élément absolument positionné dans CSS?

pour centrer un élément absolument positionné, vous pouvez utiliser les propriétés «gauche» et «transformer» ensemble. Tout d'abord, définissez «gauche: 50%» pour déplacer le bord gauche de l'élément au centre de son parent. Ensuite, utilisez «Transform: Translatex (-50%)» pour ramener l'élément vers la gauche par la moitié de sa propre largeur, en le centrant efficacement.

Quelle est la différence entre le positionnement «absolu» et «fixe» dans CSS?

Bien qu'ils soient à la fois «absolu» et «fixe» le positionnement de l'élément du flux de documents normal, ils diffèrent dans la façon dont ils positionnent l'élément. «Absolut» positionne l'élément par rapport à son ancêtre positionné le plus proche ou au bloc contenant initial. «Correction», en revanche, positionne l'élément par rapport à la fenêtre du navigateur. Cela signifie qu'un élément fixe ne bougera pas même si la page est défilée.

Comment CSS gère-t-il les éléments qui se chevauchent?

CSS gère les éléments qui se chevauchent à l'aide de la propriété «Z-index». Cette propriété spécifie l'ordre de pile d'un élément, qui est sa position sur l'axe Z. Un élément avec un «indice z plus élevé sera affiché devant un élément avec un« indice z »inférieur.

Qu'est-ce que le bloc contenant initial dans CSS?

Le bloc contenant initial dans CSS est le bloc contenant dans lequel réside l'élément racine (HTML). Il s'agit généralement de la fenêtre de la fenêtre du navigateur, mais peut également être la zone de page si la propriété «débordement» de l'élément racine n'est pas «visible».

Comment puis-je faire remplir une largeur et une hauteur entières de son élément parent, vous pouvez utiliser la «width» et la «hauteur» des aélets et des «width» et des «hauteur» et les réglages pour les «réglages». Cela rendra l'élément aussi large et aussi haut que son élément contenant.

Quelle est la différence entre la «largeur» et la «largeur maximale» dans CSS?

La propriété «largeur» dans CSS spécifie la largeur du contenu d'un élément, tandis que la propriété «max-largeur» définit la largeur maximale que l'élément peut s'étirer jusqu'à lorsque le contenu est plus grand que la largeur spécifiée. Si le contenu est plus petit que la «largeur maximale», le contenu restera à sa taille naturelle.

Comment puis-je faire en sorte qu'un élément maintienne son rapport d'aspect car il redimensionne?

pour faire en sorte qu'un élément maintienne son rapport d'aspect lorsqu'elle redimensionne, vous pouvez utiliser la propriété «Aspect-Ratio» dans le CSS. Cette propriété définit le rapport d'aspect pour la boîte, qui est le rapport de la largeur à la hauteur. Par exemple, «Ratio d'aspect: 16/9» maintiendra un rapport d'aspect 16: 9.

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!