División Posicionada Div Dentro Otra Div

Tengo un div position:fixed; y mi problema es que la posición fija es relativa a toda la página, necesito que el div fijo permanezca dentro de otro div centrado en la página con márgenes en automático. (Así que cuando me desplazo hacia abajo de la página, quiero ver siempre el div en la misma posición).División Posicionada Div Dentro Otra Div

Utilizo el plugin jquery StickyScroll pero no puedo hacer que funcione en Internet Explorer.

La solución podría estar en jquery/javascript, css.

Gracias

Fuente

2011-06-08 Sbml

el defintion fijo es que es relativo a la ventana del navegador posicionada. – joakimdahlstrom

¿Qué versión de IE? IE6 e inferior no admiten la posición: fijo, por lo que no va a funcionar. La página StickyScroll lo advierte: "Empleamos la posición: estilo fijo en el elemento adhesivo, por lo que IE6 no es compatible" –

Solo necesito que funcione en IE 8, pero mi página y las demostraciones StickyScroll no funcionan en IE. – Sbml

Entonces no quieren posicionamiento fijo, pero el posicionamiento absoluto.

Establezca position: absolute; en el elemento que desea colocar. Establezca position: relative; en el div centrado de modo que se convierta en una capa en la que pueda colocar elementos dentro.

Fuente

2011-06-08 13:48:04 Guffa

No, no entiende mi pregunta, quiero el mismo comportamiento de un div fijo (si me desplazo hacia abajo en la página siempre veo el div), pero dentro de un contenedor. – Sbml

@Sbml Eso suena bastante contradictorio. – joakimdahlstrom

Por qué es contradictorio, el sitio web tiene 900px de ancho, con márgenes automáticos. Tengo un div con instrucciones, así que cuando me desplazo hacia abajo en la página, quiero ver siempre ese div. Si pongo, por ejemplo, izquierda: 300 en mi monitor de 1280x800, en una pantalla de 1920x1200 el div permanece fuera de los márgenes del sitio web ... – Sbml

Definitivamente no necesita jQuery o JavaScript para lograr esto. Esto es lo que necesita: HTML:

<div class="outer"> 
    <div class="inner">some text here 
    </div> 
</div>

CSS:

.outer { 
    width:200px; 
    height:600px; 
    background-color:red; 
    margin:0 auto; 
} 
.inner { 
    width:50px; 
    border:1px solid white; 
    position:fixed; 
}

Tener un vistazo a esto: http://jsfiddle.net/2mYQe/1/

Fuente

2011-06-08 13:57:59

¿Pero cómo funcionaría esto si quisiera que el div interno se arreglara a la derecha, dentro del contenedor rojo exterior? –

Sólo cambiado poco en George El código de Katsanos podría ser útil para algunos uno.

.outer { 
    width:200px; 
    height:300px; 
    background-color:red; 
    margin:0 auto; 
    overflow:auto;  
} 

.inner { 
    width:182px; 
    border:1px solid white; 
    position:absolute; 
    background-color:buttonface; 
}

de muestra en: http://jsfiddle.net/2mYQe/480/

Fuente

2012-07-25 06:48:01

Hace mucho tiempo. Tropezando sobre lo mismo. Un problema con esta solución, sin embargo. No verá el primer elemento en la lista, porque el div interior posicionado absoluto está por encima de él. (cambie el primero y el segundo "Nombre del elemento" en el quinto violín) – Seb

La solución correcta es "flexión". Han pasado 3 años desde la publicación original, así que supongo que podemos ignorar la compatibilidad con IE8 a favor de navegadores más modernos que admitan esta solución.

Como muchos aquí han notado, todas las soluciones propuestas enfrentan problemas. Desde el primer elemento en el área de contenido que se oculta desde el encabezado de posición absoluta, o desde el área de contenido que consume la altura completa del significado principal, existe el riesgo de que se corte la parte inferior del área de contenido a menos que resta el encabezado de su altura general (por ejemplo, altura: calc (100% - "altura del encabezado" px) lo que significa que tiene valores codificados en su CSS ... no es bueno, o la barra de desplazamiento se establece en el nivel principal, lo que significa que el encabezado está luchando por . bienes raíces

con el fin de evitar estas soluciones de hackers utilizan la solución "flex" a continuación.

<div style="width: 200px; float: right; border: 1px solid black; 
    display: flex; flex-direction: column;"> 
    <div style="width: 100%;"> 
     <div style="width: 100%;"> 
      I'm a header 
     </div> 
    </div> 

    <div style="width: 100%; height: 100%; overflow:auto;"> 
     <div style="height:900px; background-color:lavender;">content area</div> 
    </div> 
</div>

Fuente

2017-08-23 15:52:22 spyder1329

División Posicionada Div Dentro Otra Div

Respuesta

Cuestiones relacionadas