Comment faire un div fixe?

StackOverflow https://stackoverflow.com/questions/2151048

  •  23-09-2019
  •  | 
  •  

Question

Je suis en train de faire la boîte à fixer à la bordure inférieure droite de la page et ne se déplace pas avec la page défile vers le bas. Mais cela ne fonctionne pas pour moi ne sais pas pourquoi. Voici mon code: 

<html>
 <head>

 <style type="text/css">

.tooltip {
 width: 200px;
 position: fixed;
 top:auto;
 bottom:0px;
 right:0px;
 left:auto;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>
Était-ce utile?

La solution

Il fonctionne très bien dans FF et Chrome ..

anciennes versions d'IE ne prennent pas en charge correctement position:fixed .. pas sûr dernière version ..

Assurez-vous également que vous avez un type de document défini ..

Autres conseils

semble fonctionner pour moi .... Je crois en IE7 et plus vous aurez besoin de définir un type de document, recherchez « mode bizarreries » si vous ne savez pas où commencer à ce sujet.

Je ne pense pas que IE6 appuie la position:. Fixe

Huh, devrait fonctionner. Peut-être supprimer top: auto?

(Il ne fonctionnera pas dans IE 6 mais, comme IE 6 ne supporte pas position: fixed.

Votre html / css est rompue que dans IE. Changement de position: fixed; à position: absolute; et il devrait fonctionner plus comme vous le souhaitez.

Vous pouvez également appliquer l'élément DOCTYPE: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Oui, deux choses à prendre soin de

  • Ecrire le DOCTYPE mais celui de transition!
  • la propriété CSS de « position: fixed » est pas pris en charge par IE6 ... donc vous serait mieux d'utiliser « position: absolute ». ... avec toutes les autres propriétés gardant même

Que toutes les réponses ont « grands codes » Pourquoi juste n'ajouter « fixe » à div élément Comme ceci: 

div position: fixed;

Et que "s: D Espérons que cela fonctionne pour vous 

<html>
 <head>
 <style type="text/css">
.header {
 width: 100%;
 height:100px;
 position: fixed;
 top:0px;
 left:0px;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>

toute question liée à la position de voir ce lien alors que vous avez obtenir des solutions rapides.

http://learnlayout.com/position.html

fixe

Un élément fixe est positionné par rapport à la fenêtre, ce qui signifie qu'il reste toujours au même endroit, même si la page défile. Comme dans le cas relatif, haut, droite, bas, gauche et les propriétés sont utilisées.

Je suis sûr que vous avez remarqué que l'élément fixe dans le coin inférieur droit de la page. Je vous donne la permission de prêter attention à maintenant. Voici le CSS qui met là: 

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

relative

Par rapport se comporte comme statique sauf si vous ajoutez des propriétés supplémentaires. 

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

absolue

est la valeur absolue de la position la plus délicate. se comporte comme absolues déterminées à l'exception par rapport à l'ancêtre positionné le plus proche de la place par rapport à la fenêtre. Si un élément absolument positionné n'a pas d'ancêtres positionnés, il utilise le corps du document, et se déplace toujours avec le défilement de la page. Rappelez-vous, un élément « positionné » est celui dont la position est tout sauf statique.

Voici un exemple simple: 

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

Quelque chose comme cela devrait fonctionner 

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>

.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top