0
205
VistasSpace between div in postion: relative
I'm builiding a navigation panel which is over header. I used postion: relative and I subtracked few px (#navigation).
The height of the section header is reserved as if the navigation panel has not been moved. I would like that section to be closer to the header with no break.
How can I do it?
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