miscelazione galleggiante e posizionamento fisso

ecco un uso standard di galleggiante e fissato:miscelazione galleggiante e posizionamento fisso

<html> 
<head> 
    <style type="text/css"> 
     #bigDiv 
     { 
      background-color: red; 
      height: 2000px; 
      width: 100px; 
      float: left; 
     } 
     #littleDiv 
     { 
      background-color: green; 
      height: 400px; 
      width: 200px; 
      float: left;    
     } 
     #littleDivFixed 
     { 
      background-color: blue; 
      height: 100px; 
      width: 200px; 
      position: fixed; 
     } 
    </style> 
</head> 
<body> 
    <div id="bigDiv"> 
    </div> 
    <div id="littleDiv"> 
    </div> 
    <div id="littleDivFixed"> 
    </div> 
</body> 
</html>

div "littleDiv" è sulla destra della "bigDiv" div ma non segue lo scrolling,
il div "littleDivFixed", al contrario, scorre ma non è posizionato correttamente rispetto al div "bigDiv" (è sempre bloccato t alla sinistra del display).

E 'possibile avere un div che mescola i due comportamenti:

sempre sulla destra del "bigDiv" div (ad una distanza costante di 10px),
sempre sul display (a una distanza costante di 10px dall'alto)?

Grazie in anticipo per il vostro aiuto.

fonte

2011-01-20 Pragmateek

È possibile modificare la struttura del markup?

ho ottenuto il comportamento da te descritto (in Firefox 3.6) facendo due cambi:

Nido littleDivFixed all'interno di littleDiv

Così, invece di

<div id="littleDiv"> 
    </div> 
    <div id="littleDivFixed"> 
    </div>

avete

<div id="littleDiv"> 
     <div id="littleDivFixed"> 
     </div> 
    </div>

aggiungere un margine al div fisso

margin-left: 10px;

Impostazione margin invece di left consente di mantenere il "auto" sinistra posizionamento, pur facendo relative rettifiche.

fonte

2011-01-20 20:15:01 harpo

grazie mille per questo incredibile trucco. Sembra funzionare perfettamente con Chrome, Firefox e Opera. Certamente fallisce con IE8/9 ma era previsto. – Pragmateek

@ Serious, felice di aiutare. Ho rinunciato a IE del tutto, e sono molto più felice. – harpo

Ti piace questo? Basta aggiungere un attributo left e top al fixed div

http://jsfiddle.net/t5bK9/

Ok, questo funziona in Chrome e IE8 (assicurarsi che sia in modalità standard, non capricci), ma per qualche motivo non in jsFiddle. Non sono sicuro del perché, ma fa quello che vuoi (credo). Se si vuole essere sicuri che sia sempre a 10px nel caso in cui i div vengano ridimensionati, è possibile aggiungere un listener onResize a bigDiv per richiamare la funzione positFix.

<html> 
    <head> 
     <style> 
      #bigDiv { 
       border: 1px solid red; 
       height: 2000px; 
       width: 100px; 
       float: left; 
      } 
      #littleDiv { 
       border: 1px solid green; 
       height: 400px; 
       width: 200px; 
       float: left;    
      } 
      #littleDivFixed { 
       border: 1px solid blue; 
       height: 100px; 
       width: 200px; 
       top: 10px; 
       position: fixed; 
      } 
     </style> 
     <script type="text/javascript"> 
      function $(elem) { 
       return document.getElementById(elem); 
      } 
      function positFix() { 
       $('littleDivFixed').style.left = $('bigDiv').offsetWidth + 10; 
      } 
     </script> 
    </head> 
    <body> 
     <div id="bigDiv"> 
     </div> 
     <div id="littleDiv"> 
     </div> 
     <div id="littleDivFixed"> 
     </div> 
     <script type="text/javascript"> 
      positFix(); 
     </script> 
    </body> 
</html>

fonte

2011-01-20 19:29:52

grazie per considerare il problema e che illustra l'uso di "jsFiddle" (non so questo sito web). Ma mi piacerebbe che la sinistra fosse relativa al div "bigDiv", ad esempio sempre 10px, e non essere assoluto. – Pragmateek

grazie; in effetti con l'inizializzazione di JavaScript il risultato è perfetto ma ... Non posso usare JavaScript e devo solo usare html/css. Inoltre la gestione degli eventi di ridimensionamento rende le cose un po 'meno convenienti. – Pragmateek

È inoltre possibile aggiungere solo:

#littleDivFixed { 
    ... 
    top: 10px; 
    left: 110px; 
}

e impostare:

body { 
    width: 310px; 
    margin: 0; 
}

per il layout corretto.

JSFiddle

fonte

2017-04-21 10:41:09 simhumileco

miscelazione galleggiante e posizionamento fisso

risposta

Problemi correlati