Positionnement CSS
Positionnement CSS
Attribut de positionnement de position CSS
Cet article présente principalement l'attribut Position de l'élément. Cet attribut peut définir la méthode de positionnement de l'élément sur l'élément. page.
Table des matières
1. Introduction à la position : Présentation de la valeur et des attributs auxiliaires de la position.
2. Méthode de positionnement : Présentation des quatre méthodes de positionnement : absolue, relative, fixe et par défaut.
3. Position récapitulative : Afficher la position à titre d'exemple.
1. Introduction
1.1 Description
Attribut de position : spécifie le type de positionnement de l'élément. Autrement dit, les éléments sont séparés de la mise en page du flux de documents et affichés n'importe où sur la page.
1.2 Valeurs principales
①absolu : positionnement absolu ; hors de la mise en page du flux documentaire, l'espace restant est rempli par les éléments suivants. La position de départ du positionnement est l'élément parent le plus proche (la position n'est pas statique), sinon c'est le document Corps lui-même.
②relatif : positionnement relatif ; ne se détache pas de la disposition du flux de documents, change seulement sa propre position, laissant une zone vide dans la position d'origine du flux de documents. La position de départ du positionnement est la position originale de cet élément dans le flux documentaire.
③fixed : positionnement fixe ; similaire à l'absolu, mais ne change pas de position lorsque la barre de défilement se déplace.
④static : valeur par défaut ; disposition par défaut.
1.3 Attributs auxiliaires
L'attribut position sort simplement l'élément du flux documentaire. Si vous souhaitez que cet élément soit affiché à la position souhaitée, vous devez utiliser les attributs suivants (position. :static ne les prend pas en charge) :
①left : Indique combien de pixels insérer à gauche de l'élément et combien de pixels déplacer l'élément vers la droite.
②right : Indique combien de pixels insérer à droite de l'élément et combien de pixels déplacer l'élément vers la gauche.
③top : Indique combien de pixels insérer au-dessus de l'élément et combien de pixels déplacer l'élément vers le bas.
④bottom : Indique combien de pixels insérer sous l'élément et combien de pixels déplacer l'élément vers le haut.
La valeur des attributs ci-dessus peut être négative, unité : px.
position:absolue
Positionnement absolu ; hors de la mise en page du flux de documents, l'espace restant est rempli par les éléments suivants. La position de départ du positionnement est l'élément parent le plus proche (la position n'est pas statique), sinon c'est le document Corps lui-même. position:relative
position:relative
Le positionnement relatif ne se détache pas de la mise en page du flux de documents, change seulement sa propre position, laissant une zone vide dans la position originale du flux de documents. La position de départ du positionnement est la position originale de cet élément dans le flux documentaire.
position:fixed
Positionnement fixe ; similaire à l'absolu, mais ne change pas de position lorsque la barre de défilement se déplace.
Application pratique :
①Superposition de la boîte de connexion : comme la connexion du forum dz.
②Faux messages publicitaires QQ.
position :statique
Le positionnement par défaut signifie que cet élément est la méthode de positionnement par défaut.
Application pratique :
Traitement spécial pour IE6.
Si la barre de défilement apparaît
Lorsque l'élément contenant l'attribut position est l'élément edge :
①absolu et relatif : contenant ces deux valeurs Pour éléments de bord, des barres de défilement apparaîtront lorsque le navigateur effectuera un zoom arrière afin que cet élément ne soit pas visible.
②fixe : Pour les éléments de bord contenant cette valeur, lorsque le navigateur effectue un zoom arrière au point où cet élément est invisible, aucune barre de défilement n'apparaîtra.
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style type="text/css">
div
{
height: 200px;
width: 300px;
border-color: Black;
border-style: solid;
border-width: 1px;
}
#a
{
position:absolute;
left:900px;
top:150px;
}
#b
{
position:relative;
left:500px;
top:100px;
}
#c
{
position:fixed;
left:970px;
top:400px;
}
#d
{
position:static;
background-color:Window;
}
</style>
</head>
<body>
<div id="a" >
div-a<br />
position:absolute;<br />
绝对定位；脱离文档流，遗留空间由后续元素填充。
</div>
<div id="b" >
div-b<br />
position:relative;<br />
相对定位；不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。
</div>
<div id="c" >
div-c<br />
position:fixed;<br />
固定定位；固定在页面中，不随浏览器的大小改变而改变位置。
</div>
<div id="d">默认定位方式</div>
<input type="text" value="input1" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
