•  23-09-2019
  •  | 
  •  

Domanda

che sto cercando di fare di dialogo per essere fissato nel bordo in basso a destra della pagina e non si muove con la pagina scorre verso il basso. Ma non funziona per me so perché. Ecco il mio codice: 

<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>
È stato utile?

Soluzione

Funziona bene in FF e Chrome ..

vecchie versioni di IE non hanno sostenuto position:fixed correttamente .. non sicuro circa la versione più recente ..

Inoltre assicuratevi di avere un DOCTYPE definito ..

Altri suggerimenti

sembra funzionare per me .... io credo in IE7 e maggiore sarà necessario definire un DOCTYPE, cercare "quirks mode", se non si sa da dove cominciare su quello.

Non credo IE6 sostiene la posizione:. Fissa

Eh, dovrebbe funzionare. Forse rimuovere top: auto?

(Non funzionerà in IE 6, però, come IE 6 non supporta position: fixed.

Il tuo html / css è rotto solo in IE. Passaggio da position: fixed; a position: absolute; e dovrebbe funzionare più come si desidera.

È inoltre possibile applicare l'elemento DOCTYPE: 

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

Sì, due cose per prendersi cura di

  • Scrivi il DOCTYPE, ma quello di transizione!
  • la proprietà CSS di "position: fixed" non è supportato da IE6 ... in modo da sarebbe meglio usare "position: absolute". ... con tutte le altre proprietà mantenendo lo stesso

che tutte le risposte sono "grandi codici" Perché non basta aggiungere "fisso" per div elemento In questo modo: 

div position: fixed;

E che "s esso: D Spero che funziona per voi 

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

ogni materia relativa posizione quindi visualizzare questo link si dispone di ottenere soluzioni rapide.

http://learnlayout.com/position.html

Fisso

Un elemento fisso è posizionato rispetto alla finestra, il che significa che rimane sempre nella stessa posizione anche se la pagina viene fatta scorrere. Come con relativa, alto, destra, sono usati inferiore e beni lasciati.

Sono sicuro che hai notato che elemento fisso nell'angolo in basso a destra della pagina. Ti sto dando il permesso di prestare attenzione ad esso ora. Ecco il CSS che mette lì: 

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

relativa

relativa si comporta come statica a meno che non si aggiungono alcune proprietà in più. 

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

assoluto

assoluto è il valore di posizione più delicata. si comporta come assoluti fissi meno rispetto alla antenato posizionato più vicino anziché rispetto al viewport. Se un elemento con posizione assoluta ha antenati posizionati, utilizza il corpo del documento, ed ancora si muove insieme a scorrimento della pagina. Ricordate, un elemento "posizionato" è uno la cui posizione è nulla se non statica.

Ecco un semplice esempio: 

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

Qualcosa del genere dovrebbe funzionare 

<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;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top