hay un div (es decir,div_fixed), que se fija en su posición. Otro div a saber other_content está por debajo de la div_fixed. El other_content div tiene un padding-top de la propiedad, de modo que cuando la página se desplaza sólo el other_content se desplaza debajo de la fija div.

El violín es aquí

HTML :

<div class="div_fixed">FIXED</div>
<div class="other_content">
    content goes here<br/>
    content goes here<br/>
    content goes here<br/>
</div>

CSS:

     div { color: #fff }
        .div_fixed { position: fixed;  
    width: 100%; 
    height: 100px; 


    }

.other_content { 
background: #f00; 
height: 5000px; 
color: #fff; 
padding-top: 100px; 

margin:0 auto;

}

Pero yo quiero que los no fijos div para permanecer en el fijo div y desea que el no fijo div desaparecer justo debajo de su borde superior es decir, la posición de los no fijos div borde superior del permanecerán fijos, sino que es contenido empezará a desaparecer en la página de desplazamiento sólo la forma en que sucedió cuando se estaba quedando debajo de la fija div.

Así que tuve un poco de editar en html ( sólo 2 descansos) antes de que el no fijo div :

    <div class="div_fixed">FIXED</div>
<br><br/>
        <div class="other_content">
            content goes here<br/>
            content goes here<br/>
            content goes here<br/>
        </div>

La adición en css es:

  .fixed_div{

    z-index:-1;
    }

    .other_content{


    width:60%;
    z-index:99099900;


    }

Pero el borde superior de la no-fijo div no permanecer en la posición que desee.

Cómo lograr eso ?

EDITAR :

supongamos que añadir una imagen de fondo para la no-fijo div. Es posible que parte de la imagen de fondo de los fijos de div más que el otro div scroll tendrá un z-index mayor que la de los no fijos div ? ¿El problema se resuelve de esa manera ?

EDIT2

Vamos a utilizar supongamos que fixed_div es el encabezado, other_content es el contenido del cuerpo de una página web. Vamos a añadir un pie de página div con id footer. De desplazamiento No debe estar presente en other_content. other_content debe desplazarse cuando la página se desplaza.

2 Comentarios

  1. 5

    Creo que esto es lo que estás buscando. Usted querrá posición fija div en un fixed la moda, pero el segundo div no necesita de posicionamiento especial. Solo dale un margin-top:100px donde 100px es la altura de la div.

    El truco es usar z-index y agregar position:relative; a la div de contenido

    Demo: http://jsfiddle.net/KyP8L/3/

    .div_fixed{
        height:100px;
        width:100%;    
        position:fixed;
        top:0;
        left:0;
        background:#ff0;
        z-index:500;
    }
    .other_content {
        width:60%;    
        background:#0ff;
        margin-top:100px;
        z-index:600;
        position:relative;
    }
    
    
    • lo cambio ¿que hacer ? ancho de la other_content div debe ser del 60%. En el que caso de que la no-fijo div no se parecen permanecer en el fijo ?
    • other_content debe mantenerse por encima de fixed_div. jsfiddle no lo muestran.
    • Cuando te dicen más arriba, se refiere más al usuario en el eje z? Aquí vamos: jsfiddle.net/KyP8L/3 – el truco es usar z-index y agregar position:relative; a la div de contenido.
    • ahora bien, esto es ‘de arriba’. Pero el other_content debe permanecer en el fixed_div y el borde superior debe ser un poco más abajo de la de la fixed_div .
    • Tendrás que explicar lo que usted quiere es un poco mejor, o mostrarme un ejemplo o ilustración.
    • permítanos continuar esta discusión en el chat
    • es esta la solución final : jsfiddle.net/BCRPa/8 como se dijo en el chat ?
    • el jsfiddle solución si se toma en pc navegador como una normal de la página web, no funciona..

  2. 0

    Sería una opción para envolver el div de contenido en otro recipiente, con una posición fija.

    Por ejemplo:

    HTML:

    <div class="div_fixed">FIXED</div>
    <div class="fixed_container">
        <div class="other_content">
            content goes here<br/>
            content goes here<br/>
            content goes here<br/>
        </div>
    </div>

    CSS:

    .fixed_container {
        position: fixed;
        overflow: auto;
        top:30px;
        width: 100%;
        height: 5000px;
        z-index:10; }
    
    .other_content { position: absolute; }

    Demo: http://jsfiddle.net/xmKMs/

    • ¿qué acerca de la desaparición del borde superior de la other_content en la forma esperada ?
    • He aquí un ejemplo: jsfiddle.net/49AjB Es que ¿qué estás esperando?
    • por qué padding-top:100px para la other_content ?
    • Eso es justo lo que había en el ejemplo original. Que podría ser eliminado si es necesario.
    • la eliminación no ayuda
    • pruebe a reducir la altura y el aumento de la cantidad de contenido: jsfiddle.net/xmKMs
    • la barra de desplazamiento para el desplazamiento de los div no quería. Cuando la página web se desplaza el desplazamiento div debe desplazarse también… en Busca de la solución

Dejar respuesta

Please enter your comment!
Please enter your name here