0
208
VistasEspacio entre div en posición: relativo
Estoy construyendo un panel de navegación que está sobre el encabezado. Utilicé postion: relative y subseguí algunos px (#navegación).
La altura del encabezado de la sección se reserva como si el panel de navegación no se hubiera movido. Me gustaría que esa sección estuviera más cerca del encabezado sin interrupciones.
¿Cómo puedo hacerlo?
body { background-color: #e6e6e6; } #conteiner { border: 1px solid black; } #conteiner>* { min-height: 100px; display: flex; } /* HEADER */ header { flex-direction: column; align-items: center; } #spacer-up { background-color: #8dc63f; height: 15px; width: 100%; } #frame-header { max-height: 400px; flex-direction: column; align-items: center; } #spacer-down { background-color: #dddddd; height: 15px; width: 100%; } #navigation { width: 450px; height: 130px; display: flex; position: relative; top: -65px; } .button1 { flex: 1; background-color: #00984a; display: flex; align-items: center; justify-content: center; color: #FFF; transition: 0.1s; } .button1:hover { background-color: #007639; transition: 0.2s; } /* Content */ section { display: flex; justify-content: center; position: relative; } #content { border: 1px solid black; width: 1200px; background-color: #FFF; } footer { background-color: #007639; justify-content: center; align-items: center; } <body> <!-- Add your site or application content here --> <div id="conteiner"> <header> <div id="spacer-up"></div> <div id="frame-header"> <img src="/img/header-background.png" alt="" width="1138" height="369"> </div> <div id="spacer-down"></div> <div id="navigation"> <div class="button1">TEXT1</div> <div class="button1">TEXT2</div> <div class="button1">TEXT3</div> </div> </header> <section> <div id="content"> SECTION 1 </div> </section> <footer> FOOTER </footer> </div> <body>
·
Juan Pablo Isaza
Responde la pregunta