Mezcla flotante y posicionamiento fijo

aquí es un uso estándar de flotador y fija:Mezcla flotante y posicionamiento fijo

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

el div "littleDiv" está a la derecha de la "bigDiv" div pero no sigue el desplazamiento,
el div "littleDivFixed", por el contrario, se desplaza pero no está bien posicionado con respecto al div "bigDiv" (siempre está atascado t la izquierda de la pantalla).

¿Es posible tener un div que mezcla los dos comportamientos:

siempre a la derecha de la "bigDiv" div (a una distancia constante de 10px),
siempre en la pantalla (a una distancia constante de 10px desde la parte superior)?

Gracias de antemano por su ayuda.

Fuente

2011-01-20 Pragmateek

¿Se puede cambiar la estructura de la marca?

Tengo el comportamiento que se describe (en Firefox 3.6) haciendo dos cambios:

Nido littleDivFixed interior de littleDiv

Así que en lugar de

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

tiene

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

añadir un margen a la div fijo

margin-left: 10px;

Configuración margin en lugar de left le permite mantener el "auto" izquierda posicionamiento, sin dejar de hacer ajustes relativos.

Fuente

2011-01-20 20:15:01 harpo

muchas gracias por este increíble truco. Parece funcionar perfectamente con Chrome, Firefox y Opera. Por supuesto, falla con IE8/9 pero se esperaba. – Pragmateek

@Serious, me complace ayudarlo. He renunciado por completo al IE, y estoy mucho más feliz. – harpo

Como esta? Sólo tiene que añadir un atributo left y top a la div fixed

http://jsfiddle.net/t5bK9/

Ok, esto funciona en Chrome y IE8 (asegúrese de que sea el modo estándar, no caprichos), pero por alguna razón no en jsFiddle. No estoy seguro de por qué, pero hace lo que quiere (creo). Si quiere estar seguro de que siempre es 10px en caso de que los divs sean redimensionados, podría agregar un oder onResize a bigDiv para volver a llamar a la función 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>

Fuente

2011-01-20 19:29:52

gracias por considerar la cuestión y que ilustra el uso de "jsFiddle" (no sé este sitio web). Pero me gustaría que la izquierda sea relativa a la div "bigDiv", por ejemplo, siempre 10px, y no sea absoluta. – Pragmateek

gracias; De hecho, con la inicialización de JavaScript, el resultado es perfecto, pero ... No puedo usar JavaScript y tengo que limitarme solo a html/css. Además, el manejo de los eventos de cambio de tamaño hace que las cosas sean un poco menos convenientes. – Pragmateek

Puede también añadir solamente:

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

y establecer:

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

para la disposición correcta.

JSFiddle

Fuente

2017-04-21 10:41:09 simhumileco

Mezcla flotante y posicionamiento fijo

Respuesta

Cuestiones relacionadas