Como fazer uma div e fixa?

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

  •  23-09-2019
  •  | 
  •  

Pergunta

Estou tentando fazer com que a caixa seja corrigida na borda inferior direita da página e não se move com a página rola para baixo. Mas não está funcionando para mim não sei por quê. Aqui está o meu código:

<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>
Foi útil?

Solução

Funciona bem em FF e Chrome ..

versões mais antigas do IE não apoiaram position:fixed corretamente .. não tenho certeza sobre a versão mais recente ..

Também verifique se você tem um doctype definido ..

Outras dicas

Parece estar funcionando para mim ... Eu acredito no IE7 e maior você precisará definir um doctype, procure por "Modo Quirks" se não souber por onde começar.

Eu não acho que o IE6 suporta a posição: corrigido.

Huh, deve funcionar. Talvez remova top: auto?

(No entanto, não funcionará no IE 6, pois o IE 6 não suporta position: fixed.

Seu HTML/CSS está quebrado apenas no IE. Mude de position: fixed; para position: absolute; E deve funcionar mais como você deseja.

Você também pode aplicar o elemento doctype:

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

Sim, duas coisas para cuidar

  • Escreva o Doctype, mas o transitório!
  • A propriedade CSS de "Posição: Corrigida" não é suportada pelo IE6 ... então você seria melhor usando "Posição: Absoluto" ... com todas as outras propriedades mantendo o mesmo.

Que todas as respostas têm "grandes códigos", por que não adicionar "corrigido" ao elemento div como este:

div position: fixed;

E que "é isso: D Espero que funcione para você

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

Qualquer problema relacionado à posição, em seguida, visualize este link que você obtém soluções rápidas.

http://learnlayout.com/position.html

Fixo

Um elemento fixo é posicionado em relação à viewport, o que significa que sempre permanece no mesmo local, mesmo que a página seja rolada. Como em relação, as propriedades superior, direita, inferior e esquerda são usadas.

Tenho certeza de que você notou esse elemento fixo no canto da mão inferior direito da página. Estou lhe dando permissão para prestar atenção agora. Aqui estão o CSS que o coloca lá:

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

relativo

O relativo se comporta o mesmo que estático, a menos que você adicione algumas propriedades extras.

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

absoluto

Absoluto é o valor de posição mais complicado. O absoluto se comporta como fixo, exceto em relação ao ancestral posicionado mais próximo, em vez de em relação à visualização. Se um elemento absolutamente posicionado não possui ancestrais posicionados, ele usa o corpo do documento e ainda se move junto com a rolagem de páginas. Lembre -se de que um elemento "posicionado" é aquele cuja posição é qualquer coisa, exceto estática.

Aqui está um exemplo simples:

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

Algo assim deve funcionar

<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;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top