Comment faire un fixe div?

Je suis en train de faire à cocher pour être fixé dans la partie inférieure droite de la bordure de la page et ne bouge pas avec la page défile vers le bas. Mais cela ne fonctionne pas pour moi, je 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>

Fonctionne très bien avec moi. Même si l'auto valeurs pour le haut et la gauche ne sont pas obligatoires. Quel est le problème? Quel navigateur utilisez-vous pour les tests?

InformationsquelleAutor taabouzeid | 2010-01-27

10

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

les anciennes versions d'IE n'a pas de soutien position:fixed correctement .. pas sûr au sujet de la dernière version..

Assurez-vous également que vous avez un doctype défini ..
- Il a travaillé uniquement après l'ajout du doctype. Merci 🙂
InformationsquelleAutor Gabriele Petrioli
2

Semble fonctionner pour moi..... Je crois que dans IE7 et plus vous aurez besoin de définir un doctype, recherche pour "mode quirks" si vous ne savez pas par où commencer.

Je ne pense pas que IE6 soutient position:fixed.
- Vous avez raison, monsieur, à l'aide de positionnement absolu fonctionne si vous voulez économiser quelques octets.
InformationsquelleAutor dpb
1

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

(Il ne fonctionne pas sous IE 6, que IE 6 ne prend pas en charge position: fixed.

InformationsquelleAutor Paul D. Waite
0

Votre code html/css, seulement interrompu dans IE. Changement de position: fixed; à position: absolute; et il doit travailler 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">
```
InformationsquelleAutor Nick Larsen
0

Oui, deux choses à prendre soin de
- Écrire le DOCTYPE mais la une transition!
- la propriété CSS de "position:fixed" n'est pas pris en charge par IE6...donc, il serait préférable d'utiliser "position:absolute"...avec tous les autres propriétés de maintien de même.
InformationsquelleAutor Devanand
0

Que toutes les réponses ont "big codes"
Pourquoi ne pas ajouter "résolu" à l'élément div
Comme ceci:
```
div position: fixed;
```
Et que"s il 😀
Espérons que cela fonctionne pour vous

InformationsquelleAutor user1959021

<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>

InformationsquelleAutor Ravi Chauhan

0

n'importe quelle position du problème connexe, alors voir ce lien vous devez obtenir des solutions rapides.

http://learnlayout.com/position.html

Fixe

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

Je suis sûr que vous avez remarqué que l'élément fixe dans le coin en bas à droite de la page. Je vais vous donner la permission de faire attention à elle maintenant. Ici, c'est le CSS qui le met là:
```
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}
```
relative

par rapport a le même comportement que 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

absolue est la plus délicate de la valeur de position. absolue se comporte comme fixe, à l'exception par rapport à la plus proche ancêtre positionné au lieu de par rapport à la fenêtre d'affichage. Si un positionnement absolu de l'élément n'a pas placé ancêtres, il utilise le corps du document, et se déplace encore avec la page de défilement. Rappelez-vous, un "positionné" élément est un 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;
}
```
InformationsquelleAutor Ravi Chauhan

Quelque chose comme cela devrait fonctionner

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

InformationsquelleAutor Erik Österling

Vous devez vous connecter pour publier un commentaire.