Valeur de la propriété CSS position: fixed

Propriété CSS position

position: fixedest utilisé dans les propriétés de positionnement CSS pour la valeurPositionnement fixe. Les éléments utilisant le positionnement fixe serontretirés du flux du document, par rapport àla fenêtre d'affichage du navigateur(fenêtre d'affichage) pour le positionnement,et ne bougera pas lors du défilement de la page。

C'est la technologie essentielle pour implémenter des barres de navigation fixes, des boutons de retour en haut, des publicités latérales et d'autres fonctionnalités.

Définitions de mots：fixedDu latinfixare, signifiant « fixe, installé », indiquant qu'une fois la position de l'élément déterminée, elle ne changera pas.

Syntaxe de base

position: fixedDoit être utilisé avectop、right、bottom、leftpropriété pour spécifier la position par rapport à la fenêtre d'affichage.

/* 语法 */
position: fixed;

/* 常用组合：固定在顶部 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
}

/* 固定在右下角 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Fonctionnalités principales

Caractéristique 1 : positionnement relatif à la fenêtre d'affichage

Les éléments en positionnement fixene sont pas affectés par les éléments parents, toujours positionnés par rapport à la zone visible de la fenêtre du navigateur.

Caractéristique 2 : hors du flux du document

etabsoluteDe même,fixedélémentN'occupe pas d'espace dans le document, les éléments environnants s'organiseront normalement,Ignorezen ignorant l'existence de l'élément en positionnement fixe.

Caractéristique 3 : fixe, ne se déplace pas lors du défilement

C'estfixedetabsolutedeDifférence clé: peu importe comment la page défile, les éléments en positionnement fixe restent toujours à la position spécifiée.

Caractéristique 4 : active le z-index

Le positionnement fixe s'activez-indexLa propriété peut contrôler l'ordre d'empilement des éléments dans la fenêtre d'affichage.

Exemple

Approfondissons notre compréhension à travers des exemplesposition: fixedCaractéristiques.

Exemple 1 : barre de navigation fixe en haut

C'estfixedLe scénario d'application le plus courant : une barre de navigation fixe.

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

/* Barre de navigation fixe en haut */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #2c3e50;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
z-index: 1000;
}

/* Zone de contenu principale */
.content {
padding-top: 80px; /* Éviter d'être masqué par la barre de navigation */
padding: 80px 20px 20px;
max-width: 800px;
margin: 0 auto;
}

.spacer {
height: 1500px; /* Créer une zone de défilement suffisamment longue */
}

.text-block {
margin-bottom: 20px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="navbar">
Barre de navigation fixe - Faites défiler vers le bas pour voir l'effet
</div>
<div class="content">
<h1>Exemple de positionnement fixe</h1>
<p>Ceci est une barre de navigation fixe implémentée à l'aide de position: fixed.</p>
<p>Peu importe comment vous faites défiler la page, la barre de navigation reste en haut de la page.</p>
<div class="text-block">
<h2>Zone de contenu 1</h2>
<p>Ceci est le premier paragraphe de contenu, utilisé pour remplir la page afin de générer une barre de défilement.</p>
</div>
<div class="text-block">
<h2>Zone de contenu 2</h2>
<p>Ceci est le deuxième paragraphe de contenu.</p>
</div>
<div class="text-block">
<h2>Zone de contenu 3</h2>
<p>Ceci est le troisième paragraphe de contenu.</p>
</div>
<div class="text-block">
<h2>Zone de contenu 4</h2>
<p>Ceci est le contenu de la zone 4.</p>
</div>
<div class="spacer"></div>
</div>
</body>
</html>

Exemple 2 : Bouton de retour en haut fixé dans le coin inférieur droit

Le positionnement fixe est également couramment utilisé pour créer des boutons « retour en haut » :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}

/* La page est suffisamment longue pour générer une barre de défilement */
.tall-content {
height: 2000px;
}

/* Bouton fixé dans le coin inférieur droit */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.2s;
}

.back-to-top:hover {
transform: scale(1.1);
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="content">
<h1>Exemple de bouton Retour en haut</h1>
<p>Faites défiler la page pour voir l'effet du bouton fixe.</p>
<div class="tall-content"></div>
</div>

<div class="back-to-top" title="Retour en haut">
↑
</div>
</body>
</html>

Exemple 3 : Barre latérale fixe

Le positionnement fixe peut également permettre de mettre en place une barre latérale fixe :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
}

/* Conteneur principal : utilisation d'une mise en page en grille */
.container {
display: grid;
grid-template-columns: 1fr 200px;
max-width: 1000px;
margin: 0 auto;
min-height: 2000px;
}

.main-content {
padding: 20px;
background-color: #ecf0f1;
}

/* Barre latérale fixe */
.sidebar {
position: fixed;
top: 20px;
right: calc(50% - 500px + 220px);
width: 180px;
background-color: #3498db;
color: white;
padding: 15px;
border-radius: 4px;
}

.ad-banner {
background-color: #e74c3c;
padding: 10px;
text-align: center;
border-radius: 4px;
margin-bottom: 10px;
}

.content-block {
background-color: white;
padding: 15px;
margin-bottom: 15px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="main-content">
<h1>Zone de contenu principale</h1>
<p>Il s'agit du contenu principal, qui se déplace avec la barre de défilement.</p>
<div class="content-block">
<p>Paragraphe de contenu 1 - Remplissez la page pour créer un effet de défilement.</p>
</div>
<div class="content-block">
<p>Paragraphe de contenu 2</p>
</div>
<div class="content-block">
<p>Paragraphe de contenu 3</p>
</div>
<div class="content-block">
<p>Paragraphe de contenu 4</p>
</div>
<div class="content-block">
<p>Paragraphe de contenu 5</p>
</div>
<div class="content-block">
<p>Paragraphe de contenu 6</p>
</div>
<div class="content-block">
<p>Paragraphe de contenu 7</p>
</div>
<div class="content-block">
<p>Paragraphe de contenu 8</p>
</div>
</div>

<div class="sidebar">
<div class="ad-banner">Espace publicitaire</div>
<p>Barre latérale fixe</p>
<p>Peu importe la façon dont le contenu principal défile, je reste toujours fixé sur le côté droit.</p>
</div>
</div>
</body>
</html>

Exemple 4 : Pied de page fixé en bas

Parfois, vous devez fixer un pied de page en bas sur des pages avec peu de contenu :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: Arial, sans-serif;
}

.content {
flex: 1;
padding: 40px 20px;
max-width: 800px;
margin: 0 auto;
width: 100%;
}

/* Pied de page fixé en bas */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #2c3e50;
color: white;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<div class="content">
<h1>Page avec peu de contenu</h1>
<p>Cette page a très peu de contenu, mais le pied de page est toujours fixé en bas.</p>
<p>Implémenté à l'aide de flex: 1 de flexbox combiné avec position: fixed.</p>
</div>

<div class="footer">
©2026 EXEMPLE - Pied de page fixe
</div>
</body>
</html>

Exemple 5 : Calque de superposition fixe

Le positionnement fixe peut également être utilisé pour créer des superpositions plein écran :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}

.open-btn {
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

/* Calque de superposition fixe */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}

/* Masquer la superposition */
.modal-overlay.hidden {
display: none;
}

/* Contenu de la fenêtre contextuelle */
.modal-content {
background-color: white;
padding: 30px;
border-radius: 8px;
text-align: center;
max-width: 400px;
}

.modal-content h2 {
margin-bottom: 15px;
}

.close-btn {
margin-top: 20px;
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Exemple de superposition fixe</h1>
<p>Cliquez sur le bouton pour ouvrir la fenêtre contextuelle.</p>

<button class="open-btn" onclick="document.querySelector('.modal-overlay').classList.remove('hidden')">
Ouvrir la fenêtre contextuelle
</button>

<div class="modal-overlay hidden">
<div class="modal-content">
<h2>Bienvenue sur EXAMPLE</h2>
<p>Ceci est une pop-up de superposition créée à l'aide d'un positionnement fixe.</p>
<p>La superposition couvre toujours l'ensemble de la fenêtre d'affichage et ne défile pas avec la page.</p>
<button class="close-btn" onclick="document.querySelector('.modal-overlay').classList.add('hidden')">
Close
</button>
</div>
</div>
</body>
</html>

Notes

Problèmes de compatibilité mobile :Dans iOS Safari et certains navigateurs mobiles,position: fixedil peut y avoir des problèmes de compatibilité. L'élément peut se déplacer lorsque le champ de saisie reçoit le focus. Les solutions incluent : utiliser-webkit-position: fixedou définirtransform: translateZ(0)pour activer l'accélération matérielle.

niveau de z-index

de l'élément en positionnement fixez-indexest relatif auviewportcalculé, et non relatif à l'élément parent.

Différence avec le positionnement absolu

Fonctionnalités	position: absolute	position: fixed
référence de positionnement	élément ancêtre positionné le plus proche	Viewport du navigateur
défilement de la page	Se déplace lorsque la page défile	fixe et ne se déplace pas
print	affichage normal	peut ne pas s'afficher ou se comporter anormalement

Empêcher les éléments positionnés en fixed d'être imprimés

@media print {
    .fixed-element {
        position: static;  /* 打印时取消固定定位 */
    }
}

Scénarios d'application courants

Scénario 1 : Navigation supérieure fixe

.nav-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
}

Scénario 2 : Bouton de retour fixe

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Scénario 3 : Fenêtre de chat

.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 400px;
}

Résumé

position: fixedest la technologie essentielle pour implémenter des éléments d'interface utilisateur fixes :

relatif auviewport du navigateurpositionnement, non affecté par l'élément parent
Fixe, ne se déplace pas avec le défilement de la pageDéplacer
élémentSorti du flux du document, n'occupe pas d'espace
activerz-index, peut contrôler l'ordre d'empilement
Couramment utilisé pour les barres de navigation fixes, les boutons de retour en haut, les barres latérales fixes et les superpositions modales
Faites attention aux problèmes de compatibilité sur mobile

Propriété CSS position

autres extensions

CSS3 Tutoriel

CSS Conception adaptative

CSS Manuel de référence

Valeur de la propriété CSS position: fixed

Syntaxe de base

Fonctionnalités principales

Caractéristique 1 : positionnement relatif à la fenêtre d'affichage

Caractéristique 2 : hors du flux du document

Caractéristique 3 : fixe, ne se déplace pas lors du défilement

Caractéristique 4 : active le z-index

Exemple

Exemple 1 : barre de navigation fixe en haut

Exemple

Exemple 2 : Bouton de retour en haut fixé dans le coin inférieur droit

Exemple

Exemple 3 : Barre latérale fixe

Exemple

Exemple 4 : Pied de page fixé en bas

Exemple

Exemple 5 : Calque de superposition fixe

Exemple

Notes

niveau de z-index

Différence avec le positionnement absolu

Empêcher les éléments positionnés en fixed d'être imprimés

Scénarios d'application courants

Scénario 1 : Navigation supérieure fixe

Scénario 2 : Bouton de retour fixe

Scénario 3 : Fenêtre de chat

Résumé