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