Positionnement CSS
La propriété de positionnement CSS permet de positionner un élément. Il peut également placer un élément derrière un autre et spécifier ce qui doit se passer si le contenu d'un élément est trop volumineux. L'élément
peut être positionné à l'aide des attributs top, bottom, left et right. Cependant, ces propriétés ne fonctionneront que si la propriété position est définie en premier. Ils ont également différentes manières de travailler, selon la méthode de positionnement
Il existe quatre méthodes de positionnement différentes.
Positionnement statique
La valeur par défaut de l'élément HTML, c'est-à-dire qu'il n'y a pas de positionnement et que l'élément apparaît dans le flux normal.
Les éléments positionnés statiques ne seront pas affectés par le haut, le bas, la gauche et la droite.
Positionnement fixe
La position de l'élément est fixe par rapport à la fenêtre du navigateur.
Il ne bougera pas même si la fenêtre défile :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7和IE8支持只有一个!DOCTYPE指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>Exécutez le programme et essayez-le
Positionnement relatif
Les éléments positionnés relativement sont positionnés par rapport à leur position normale.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>Exécutez le programme pour l'essayer
Le contenu des éléments positionnés relativement et des éléments qui se chevauchent l'autre peut être déplacé, l'espace qu'il occupait à l'origine ne changera pas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>
</html>Les éléments positionnés relativement sont souvent utilisés comme blocs conteneurs pour les éléments positionnés de manière absolue.
Positionnement absolu
Un élément en position absolue est positionné par rapport à l'élément parent positionné le plus proche, si l'élément n'a pas de parent positionné élément, alors sa position est relative à :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>Exécutez le programme pour l'essayer
Le positionnement absolu rend la position de l'élément indépendante du flux de documents, il n'occupe donc pas d'espace.
Les éléments positionnés de manière absolue se chevauchent avec d'autres éléments.
Éléments qui se chevauchent
Les éléments sont positionnés indépendamment du flux de documents, afin qu'ils puissent couvrir d'autres éléments sur la page
L'attribut z-index spécifie l'ordre d'empilement d'un élément (quel élément doit être placé devant ou derrière)
Un élément peut avoir un ordre d'empilement positif ou négatif :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>Exécutez le programme à essayer
Les éléments avec un ordre d'empilement supérieur sont toujours devant les éléments avec un ordre d'empilement inférieur.
Remarque : Si deux éléments positionnés se chevauchent et qu'aucun z-index n'est spécifié, le dernier élément positionné dans le code HTML sera affiché en haut.
Plus d'exemples
Comment utiliser les barres de défilement pour afficher le contenu de débordement dans les éléments
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>Exécuter le programme Essayez-le
Exemple
Comment changer le curseur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>将鼠标移动到这些字上改变鼠标样式cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
Exécutez le programme et essayez-le
section suivante