siempre en la parte superior div dentro de la zona

he creado un div que está siempre encimasiempre en la parte superior div dentro de la zona

.visibleDiv, #topLeft 
{ 
    position: fixed; 
    width: 150px; 
    border: solid 1px #e1e1e1; 
    vertical-align: middle; 
    background: #ffdab9; 
    text-align: center; 
} 

#topLeft 
{ 
    top: 10px; 
    left: 10px; 
}

Y mostrarlo al igual que

<div id="topLeft"> 
    Top Left 
</div>

Pero también tengo un div llamado contenedor. Y me gustaría que topLeft permanezca en la parte superior izquierda dentro de ese contenedor en lugar de en la parte superior izquierda de la pantalla. Soy bastante nuevo en CSS y me he estado rascando la cabeza por un tiempo sobre cómo lograr tal efecto.

Así que para explicar más claramente me gustaría tratar de conseguir este efecto

______________ 
|Other things| 
|____________| 
________________________________ 
| TOP LEFT MESSAGE|   | 
|_________________|   | 
|        | 
|        | 
|   CONTAINER DIV  | 
|        | 
|        |

Y cuando se desplaza hacia abajo Quiero que el superior izquierda para estar en la parte superior izquierda de la pantalla dentro de la pestaña de contenedores al igual que

|__________________   | 
| TOP LEFT MESSAGE|   | 
|_________________|   | 
|        | 
|        | 
|   CONTAINER DIV  | 
|        | 
|        | 
|______________________________|

Si alguien pudiera señalarme en la dirección correcta o mostrarme cómo lograrlo con una explicación, estaría muy agradecido. Gracias a todos de antemano por ayudar o simplemente leer esta publicación.

Fuente

2011-12-23 Quillion

Probablemente deberías agregar una etiqueta 'javascript' porque esto ciertamente no se puede hacer solo con CSS. – Wex

De acuerdo, ¿desea inicialmente el elemento en la parte superior izquierda de su contenedor, pero luego, cuando comience a desplazarse, desea arreglarlo en la parte superior izquierda de la pantalla? – Purag

@Purmou Quiero que permanezca fijo en la parte superior izquierda dentro del contenedor. Casi quiero algo como esto http://papermashup.com/ solo dentro de cierta etiqueta div. – Quillion

Simplemente agregue la posición: relativa a su elemento contenedor.

ver este fiddle

actualización

jQuery es muy útil aquí. Puede usarlo para calcular fácilmente cuándo el "contenedor" llega a esta parte superior del puerto de visualización y luego reasignar una clase a su elemento "topLeft" para arreglarlo.

HTML

<div class="head"> 
Some Stuff 
</div> 
<div class="container"> 
    <div id="topLeft">Top Left Stuff</div> 
    Container Stuff 
</div>

CSS

.container 
{ 

    background-color:#FAA; 
    height:1000px; 
} 

#topLeft 
{ 
    width: 150px; 
    border: solid 1px #e1e1e1; 
    vertical-align: middle; 
    background: #ffdab9; 
    text-align: center; 
} 

.fixit 
{ 
    position:fixed; 

    top: 0px; 
}

Javascript

<!-- Include jQuery Library --> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
<!-- Wire Up Our Magic --> 
<script type='text/javascript'> 
$(window).load(function(){ 
$(window).scroll(function() { 
    if(($(".container").position().top - $(window).scrollTop()) <= 0) 
     { 
      $("#topLeft").addClass("fixit"); 
     } 
     else 
     { 
      $("#topLeft").removeClass("fixit"); 
     } 

    }); 
}); 

</script>

Verlo en acción here

Fuente

2011-12-23 21:29:35

Ese es exactamente el mismo efecto que sigo recibiendo también. Ver el problema es que quiero que cuando desplace la página hacia abajo y desaparezca la parte superior del contenedor, la "Materia superior izquierda" vaya a la parte superior de la pantalla – Quillion

En cuyo caso necesitará un javascript. –

Muchas gracias, esto es exactamente lo que estaba buscando. Y no tenía idea de que podría hacerlo usando javascript. Muchas gracias por una gran lección! – Quillion

Aquí es un violín http://jsfiddle.net/TSfLu/

El mensaje de arriba a la izquierda siempre estará en esa posición y cubre todo debajo de él. Por lo tanto, es posible que desee colocar el contenido en su página en consecuencia.

Fuente

2011-12-23 21:49:03 Virendra

Parece que Jon P ya publicó una solución similar. – Virendra

siempre en la parte superior div dentro de la zona

Respuesta

Cuestiones relacionadas