Positionnement CSS
Position CSS
La propriété de position CSS vous permet de superposer une partie de la mise en page avec une autre, et peut également faire des choses qui, pendant de nombreuses années, nécessitaient généralement l'utilisation de plusieurs tableaux. Exemple :
Détermine quel élément est affiché devant !
les éléments peuvent se chevaucher !
Positionnement
La propriété CSS positionnement 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.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</body>
</html>Exécuter l'instance ?
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Positionnement fixe La position de l'élément
est fixe par rapport à la fenêtre du navigateur.
Même si la fenêtre défile, elle ne bougera pas :
Instance
<!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écuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque : Le positionnement fixe doit être décrit sous IE7 et IE8 peut le prendre en charge.
Positionnement fixe Rend la position de l'élément indépendante du flux de documents, afin qu'il ne prenne pas de place.
Les éléments positionnés fixes se chevauchent avec d'autres éléments.
Positionnement relatif
Un élément positionné relativement est positionné par rapport à sa 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écuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Le contenu des éléments positionnés relativement et des éléments qui se chevauchent peut être déplacé et l'espace qu'ils occupent à l'origine ne changera pas.
Instance
<!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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Les éléments positionnés de manière relative sont souvent utilisés comme blocs conteneurs pour les éléments positionnés de manière absolue.
Positionnement absolu
La position d'un élément en position absolue est relative à l'élément parent positionné le plus proche. Si l'élément n'a pas d'élément parent positionné, sa position est relative à <html> :<. 🎜>
<!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écuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
positionnement collant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>Exécuter l'instance ?Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Éléments qui se chevauchent Les éléments sont positionnés indépendamment du flux de documents, afin qu'ils puissent chevaucher 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="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>Exécuter l'exemple»Cliquez sur le bouton «Exécuter l'exemple» pour voir l'exemple en ligne
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 premier.
Plus d'exemples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Cet exemple montre comment définir la forme d'un élément. L'élément est découpé dans cette forme et affiché.
Exemple : Comment utiliser les barres de défilement pour afficher le contenu de débordement dans un élément
<!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 l'exemple»
Cliquez sur " Exécutez le bouton "Exemple" pour afficher des exemples en ligne
Cet exemple montre comment la propriété overflow crée une barre de défilement et est configurée pour s'adapter lorsque le contenu d'un élément est trop volumineux dans la zone spécifiée.
Exemple : Comment configurer le traitement automatique des débordements du navigateur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>
</html>Exécuter l'instance»
Cliquez sur "Exécuter l'instance" bouton pour afficher l'instance en ligne
Instance : 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écuter l'instance»
Cliquez sur « Exécuter Bouton "Instance" pour afficher l'exemple en ligne
Cet exemple montre comment configurer le navigateur pour gérer automatiquement les débordements.
Toutes les propriétés de positionnement CSS
Le numéro dans la colonne "CSS" indique quelle version CSS (CSS1 ou CSS2) définit la propriété.
| Attributs | Description | Valeur | CSS |
|---|---|---|---|
| bottom | définit le bas du élément positionné Le décalage entre la limite de marge et la limite inférieure de son bloc conteneur. | auto longueur % hériter | 2 |
| clip | Clip un élément absolument positionné | forme auto hériter | 2 |
| curseur | Afficher les déplacements du curseur vers le type spécifié | url auto réticule par défaut pointeur déplacement e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w -redimensionner texte attendre aide | 2 |
| gauche | définit le positionnement décalage entre le bord de la marge gauche de l'élément et le bord gauche de son bloc conteneur. | auto longueur % hériter | 2 |
| débordement | Définit ce qui se passe lorsque le contenu d'un élément déborde de sa zone. | auto caché défilement visible hériter | 2 |
| débordement-y | Spécifie comment gérer le contenu sur les bords supérieur/inférieur de la zone de contenu d'un élément de débordement | auto masqué faire défiler visible pas d'affichage pas de contenu | 2 |
| overflow-x | Spécifie comment gérer le contenu sur le bord droit/gauche de la zone de contenu d'un élément de débordement | auto masqué défilement visible pas d'affichage pas de contenu | 2 |
| position | Spécifier le type de positionnement de l'élément | absolu fixe relatif statique hériter | 2 |
| droit | définit positionnement Le décalage entre le bord de la marge droite de l'élément et le bord droit de son bloc conteneur. | auto longueur % hériter | 2 |
| haut | Définit le décalage entre la limite de marge supérieure d'un élément positionné et la limite supérieure de son bloc conteneur. | auto longueur % hériter | 2 |
| z-index | Définir l'ordre d'empilement des éléments | numéro auto hériter | 2 |
