Comment utiliser l'attribut de positionnement CSS (explication détaillée avec exemples)

Cet article vous apporte des connaissances pertinentes sur l'attribut de positionnement de position en CSS. L'attribut de position est utilisé pour spécifier le type de positionnement de l'élément. J'espère que cela sera utile à tout le monde.

Positionnement (position)

background-position

Si, lorsqu'il s'agit de flotter, la clé réside dans le mot "flottant", alors la clé de notre positionnement réside dans une "position ".

PS : Le positionnement est l'un des aspects les plus difficiles de notre CSS, mais vous devez bien l'apprendre. Notre CSS est indissociable du positionnement, en particulier des effets js ultérieurs, que nous traitons quotidiennement. N'y résistez pas, mais tombez amoureux. Cela peut faciliter notre travail !

Pourquoi utiliser le positionnement ?

Alors positionnement, où est le scénario d'application le plus long ? Jetez un oeil à quelques photos et vous aurez certainement des idées !

1. Le petit bloc jaune peut être déplacé sur l'image :
   

2. Appuyez sur les flèches gauche et droite sur l'image :
   

3. hot Il y a une pièce supplémentaire à l'extérieur de la boîte pour la rendre plus important :
   
   Les trois petits endroits ci-dessus, si des flux ou des flotteurs standard sont utilisés, la mise en œuvre sera plus compliquée ou difficile à mettre en œuvre. Pour le moment, nous utilisons le positionnement.

Les attributs de positionnement de l'élément

Les attributs de positionnement de l'élément incluent principalement le mode de positionnement et le décalage des bords. Ger Bottom offset, définit la distance de l'élément par rapport à la ligne inférieure de son élément parent

leftrightright Offset, définit la distance de l'élément par rapport à la ligne droite de son élément parentEn d'autres termes, le positionnement sera utilisé en conjonction avec ce décalage à l'avenir, comme top : 100px left : 30px ; ; etc.2 , Mode de positionnement (catégorie de positionnement)En CSS, l'attribut position est utilisé pour définir le mode de positionnement d'un élément. Son format de syntaxe de base est le suivant : Selector {position : valeur d'attribut ; }

Left offset, définit la distance de l'élément par rapport à la ligne gauche de son élément parent
Valeurs communes de l'attribut position
valeur	description

statique

Positionnement automatique (méthode de positionnement par défaut)

relatif

positionnement relatif, positionné par rapport à sa position dans le flux de documents d'origine

absolu fixedPositionnement fixe, positionné par rapport à la fenêtre du navigateur

Positionnement absolu, positionné par rapport à son élément parent positionné précédemment

Positionnement statique (statique)

Le positionnement statique est la méthode de positionnement par défaut pour tous les éléments. Lorsque la valeur de l'attribut position est statique, l'élément peut être positionné dans une position statique. La position dite statique est la position par défaut de chaque élément dans le flux de documents HTML.

Les mots ci-dessus sont traduits en langue vernaculaire : tous les éléments de la page Web sont positionnés statiquement par défaut. En fait, c’est la caractéristique du flux standard.

Dans l'état de positionnement statique, la position de l'élément ne peut pas être modifiée via les attributs de décalage de bord (haut, bas, gauche ou droite).

En fait, ce n'est rien. La seule utilité du positionnement statique est d'annuler le positionnement. position: static;

positionnement relatif relatif (type narcissique)

le positionnement relatif consiste à positionner l'élément par rapport à sa position dans le flux standard Lorsque la valeur de l'attribut position est relative, l'élément

peut être positionné par rapport à (. propre) emplacement .

Après avoir défini le positionnement relatif sur un élément, vous pouvez modifier la position de l'élément via la propriété de décalage de bord,

mais sa position dans le flux de documents sera toujours conservée (en conservant la position d'origine). Comme le montre la figure ci-dessous, il s'agit d'une démonstration de l'effet du positionnement relatif :

Remarque :

La chose la plus importante à propos du positionnement relatif est qu'il peut déplacer la position via le décalage des bords,
1. mais l'original poste occupé, Continuez à posséder .
Deuxièmement,
2. La position de chaque mouvement , est basée sur son propre coin supérieur gauche (en déplaçant la position par rapport à elle-même)

C'est-à-dire que la boîte relativement positionnée est toujours dans le flux standard, et la boîte derrière elle est toujours dans le flux standard. La boîte la traite toujours comme un flux standard. (

Le positionnement relatif ne va pas hors de propos)

Si l'objectif principal du flottement est d'afficher plusieurs éléments au niveau du bloc sur une seule ligne, alors la valeur principale du positionnement est de déplacer la position de sorte que la boîte soit là où nous je le veux.

Positionnement absoluabsolu

[

Remarque] Si le document peut défiler, les éléments en position absolue défileront avec lui, car l'élément sera finalement positionné par rapport à une certaine partie du flux normal.

Lorsque la valeur de l'attribut position est absolue, le mode de positionnement de l'élément peut être défini sur positionnement absolu.

Remarque : La chose la plus importante à propos du positionnement absolu est qu'il peut déplacer la position via le décalage des bords, mais

il est complètement hors étiquette et n'occupe pas du tout la position.

Le positionnement absolu est divisé en trois situations :

1. Le parent n'est pas positionné

Si tous les éléments parents ne sont pas positionnés, l'alignement sera basé sur l'écran actuel du navigateur (document document).

2. Le parent est positionné

Le positionnement absolu consiste à positionner l'élément en fonction de l'élément parent (ancêtre) le plus proche qui a été positionné (positionnement absolu, fixe ou relatif).

3. L'enfant doit être comme le père ※※

Cette phrase signifie que si l'enfant est en position absolue, le parent doit être en position relative

. Tout d’abord, parlons-en. Le positionnement absolu consiste à positionner l’élément en fonction de l’élément parent (ancêtre) le plus proche qui a été positionné (positionnement absolu, fixe ou relatif).

C'est-à-dire que

L'enfant est en position absolue, et le père a seulement besoin d'être positionné (peu importe que le père soit en position absolue ou en position relative, voire en position fixe

), c'est-à-dire que le fils est absolument le même que le père, et le fils est absolument le même que le père, c'est vrai. Cependant, il est fortement recommandé d'utiliser des positions relativesMais lorsque nous mettons en page nos pages Web, d'où vient l'expression la plus courante « fils et père » ? Veuillez consulter l'image ci-dessous :

Nous pouvons donc tirer la conclusion suivante :
Parce que l'enfant est positionné de manière absolue et n'occupera pas de position, il peut être placé n'importe où dans la case parent.

Lorsque la boîte parentale est aménagée, elle doit occuper une position, de sorte que le père ne peut être que relativement positionné.

C'est l'origine de l'apparence paternelle de l'enfant.

Les boîtes en position absolue peuvent être centrées horizontalement/verticalement

Pour les boîtes ordinaires, changez simplement les marges gauche et droite en auto, mais cela n'est pas valide pour le positionnement absolu

Les boîtes en position peuvent également être centrées horizontalement ou verticalement, il existe un algorithme .

Première gauche 50% de la moitié de la taille de la boîte parent
Ensuite, définissez la moitié négative de votre propre marge gauche.
Exemple de code

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*margin: 100px auto;*/
		/*float: left;*/
		position: absolute;
		/*加了定位 浮动的的盒子  margin 0 auto 失效了*/
		left: 50%;
		margin-left: -100px;
		top: 50%;
		margin-top: -100px;
	}
	</style></head><body>
	<p></p></body></html>

Positionnement fixe fixe (résigné à mort)

Le positionnement fixe est une forme spéciale de positionnement absolu, semblable à un carré qui est un rectangle spécial. Il utilise la fenêtre du navigateur comme référence pour définir les éléments de la page Web. Lorsque la valeur de l'attribut position est fixe, le mode de positionnement de l'élément peut être défini sur positionnement fixe.

Lorsqu'un positionnement fixe est défini sur un élément, celui-ci s'éloignera du contrôle du flux documentaire standard et définira toujours sa position d'affichage en fonction de la fenêtre du navigateur. Quelle que soit la manière dont la barre de défilement du navigateur défile ou la taille de la fenêtre du navigateur, l'élément sera toujours affiché à une position fixe dans la fenêtre du navigateur.

Il y a deux points en positionnement fixe :

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2; font-weight: 700

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为行内块模式，

行内块 的宽度和高度 跟内容有关系

** 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。**

顺丰案例

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.sf {
			width: 1259px;
			height: 472px;
			margin: 100px auto;
			position: relative;
		}
		.nav {
			width: 960px;
			height: 80px;
			background-color: #000;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -480px;
		}
		.nav li {
			list-style-type: none;
			width: 160px;
			height: 80px;
			float: left;
		}
		.nav li a {
			width: 160px;
			height: 80px;
			display: block;
			text-align: center;
			line-height: 80px;
			color: #fff;
			text-decoration: none;
		}
		.nav li a:hover {
			color: #000;
			background-color: #fff;
		}

	</style></head><body>
	<p class="sf">
		<a href="#">
			<img src="images/sf.png" alt=""    style="max-width:90%" width="1259">
		</a>
		<p class="nav">
			<ul>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
			</ul>

		</p>
	</p></body></html>

（学习视频分享：css视频教程）

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!