• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

99
Views
CSS posicionando el menú de búsqueda correctamente
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>

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error