Tengo div externo principal. ----Dentro de eso tengo div externo -------- y dentro de eso tengo div de menú de búsqueda interno -------- y búsqueda div lista de contenido del menú
Ahora le he dado una posición fija al div del menú de búsqueda interno. Cuando me desplazo por la parte div exterior, su posición se fija correctamente.
El problema es que cuando desplazo el div principal [más externo], entonces también el div del elemento del menú aún está fijo y no se desplaza con su div externo. ¿Cómo puedo hacer que se desplace con div externo?
.main{ width:600px; height: 700px; border:1px solid black; position:relative; } .outer{ width:500px; height: 500px; border:1px solid black; position:relative; overflow:scroll; } .inner{ width:400px; height: 40px; border:1px solid black; position:fixed; } .content{ margin-top:45px; height:600px; border:1px solid red; width:100px } <html> <head> </head> <body> <div class="main"> <div class="outer"> <div class="inner"> </div> <div class="content"> </div> </div> </div> </body> </html>Podrías usar position: sticky en lugar de fixed y definir top y left :
.inner { ... position: sticky; top: 0; left: 0; } En este caso, .main no necesita una position .
Ejemplo de trabajo:
.main { width: 600px; height: 700px; border: 1px solid black; } .outer { width: 500px; height: 500px; border: 1px solid black; position: relative; overflow: scroll; } .inner { width: 400px; height: 40px; border: 1px solid black; position: sticky; top: 0; left: 0; } .content { margin-top: 45px; height: 600px; border: 1px solid red; width: 100px } <div class="main"> <div class="outer"> <div class="inner"></div> <div class="content"></div> </div> </div> También podría usar position: absolute y definir top y left :
.inner { ... position: absolute; top: 0; left: 0; } En este caso, debe definir la position: relative para .main pero no para .outer .
Ejemplo de trabajo:
.main { width: 600px; height: 700px; border: 1px solid black; position: relative; } .outer { width: 500px; height: 500px; border: 1px solid black; overflow: scroll; } .inner { width: 400px; height: 40px; border: 1px solid black; position: absolute; top: 0; left: 0; } .content { margin-top: 45px; height: 600px; border: 1px solid red; width: 100px } <div class="main"> <div class="outer"> <div class="inner"></div> <div class="content"></div> </div> </div>