Maison >interface Web >tutoriel CSS >Comment obtenir un positionnement vertical et horizontal relatif fixe d'un élément ?
Comment obtenir un positionnement vertical et horizontal relatif fixe d'un élément ?
- Susan Sarandonoriginal
- 2024-12-16 20:38:10466parcourir
Comment positionner un élément fixe verticalement mais relatif horizontalement
Dans ce scénario, nous avons besoin d'un bouton positionné à une distance fixe du côté droit d'un conteneur, quel que soit taille de la fenêtre. Il doit également défiler avec la fenêtre, en conservant un décalage vertical et horizontal cohérent. Pour y parvenir :
- Définissez un div conteneur (div.inflow) avec une largeur, une hauteur et une marge droite fixes.
- Facultativement, ajoutez un div wrapper (div.positioner) pour positionner l'élément fixe horizontalement dans le conteneur.
- Créez l'élément fixe (div.fixed) avec une largeur, une hauteur et un sommet définis margin.
- Définir la position : fixe sur l'élément fixe pour l'ancrer à la fenêtre.
- S'abstenir de définir à gauche ou à droite sur l'élément fixe. Au lieu de cela, utilisez les divs conteneur et wrapper pour établir la position horizontale.
HTML:
<body>
<div class="inflow">
<div class="positioner">
<div class="fixed"></div>
</div>
</div>
</body>
CSS:
div.inflow {
width: 200px;
height: 1000px;
border: 1px solid blue;
float: right;
position: relative;
margin-right: 100px;
}
div.positioner {
position: absolute;
right: 0;
}
div.fixed {
width: 80px;
border: 1px solid red;
height: 100px;
position: fixed;
top: 60px;
margin-left: 15px;
}
Remarque : Si la largeur du conteneur n'est pas fixe, l'emballage div (div.positioner) est nécessaire pour pousser l'élément fixe vers le côté droit du conteneur.
Important : Paramètre de débordement : caché sur le conteneur n'a aucun effet sur la position fixe div étant en dehors de ses frontières. La position fixe le supprime effectivement du contexte de débordement du conteneur.
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!