Como empurrar div com position absolute
Estou com um problema na hora de deixa o site responsivo, preciso que quando o meu menu for clicado e a div header descer, as setas do slider que estão definidas com position absolute devem descer junto com o slider, não invadindo o espaço do menu. Se elas estivesse dentro do meu container slider funcionaria, porém estou utilizando o plugin jquery cycle e tudo que ponho dentro da container-slider se torna um elemento de slide.
<div class="topoResponsive">
<div class="header">
<div class="container-logo">
<a href="index.php"><div class="logo"></div></a>
</div>
<div class="container-menu">
<img class="menuToogle" src="assets/img/menu-toogle.png" alt="">
<ul class="nav">
<li><a href="sobre-nos.php">Quem somos</a></li>
<li><a href="pecas-agricolas.php">Peças agrícolas</a></li>
<li><a href="pecas-inox.php">Peças Inox</a></li>
<li class="mostrarMenu"><a href="contato.php">Contato</a></li>
<li><a target="_blank" href="https://www.google.com.br/search?biw=1280&bih=566&tbm=nws&ei=AhK8WpKCAsiJwgSV3bPQBQ&q=agroneg%C3%B3cio&oq=agroneg%C3%B3cio&gs_l=psy-ab.3..0l10.3154.5498.0.5666.11.7.0.4.4.0.137.722.0j6.6.0....0...1c.1.64.psy-ab..1.10.737....0.HM95MZwK05g">Notícias</a></li>
</ul>
</div>
</div>
</div>
<div class="slider">
<figure>
<img src="assets/img/slide2.png" />
<figcaption>
<p>Indústria e comércio de peças</p>
<div class="btn-slider"><a href="pecas-inox.php">Clique e conheça</a></div>
</figcaption>
</figure>
<figure>
<img src="assets/img/slide1.png" />
<figcaption>
<p>Solicite agora um orçamento!</p>
<div class="btn-slider"><a href="contato.php">Entrar em contato</a></div>
</figcaption>
</figure>
</div>
<a class="arrowsSlider" id="prevSlider" href=""><img width="60px" src="assets/img/LeftArrow.png"/></a>
<a class="arrowsSlider" id="nextSlider" href=""><img width="60px" src="assets/img/rightArrow.png"/></a>
/ CONTAINER SLIDER /
.slider{
position: relative;
height: auto;
width: 100%;
z-index: 1;
margin: 0 auto;
}
.slider img {
width: 100%;
height: auto;
}
.arrowsSlider{
position: absolute;
height: 100px;
top: 50%;
margin-top: -50px;
z-index: 2;
opacity: 0.5;
transition: 0.5s;
}
.arrowsSlider:hover{
opacity: 1;
}
#nextSlider{
right: 0;
}
.slider figcaption{
position: absolute;
text-align: center;
color: #FFF;
top: 50%;
left: 50%;
width: 400px;
height: 150px;
margin-left: -200px;
margin-top: -75px;
z-index: 2;
}
.slider figcaption p{
font-family: Myriad;
font-size: 40px;
font-weight: bold;
}
.btn-slider{
position: absolute;
width: 210px;
height: 40px;
left: 50%;
margin-left: -105px;
border: 2px solid #FFF;
transition: 0.5s;
text-align: center;
cursor: pointer;
}
.btn-slider a {
font-family: Helvetica;
font-weight: bold;
color: #FFF;
line-height: 40px;
text-decoration: none;
}
.btn-slider:hover{
background: #FFF;
}
.btn-slider:hover a{
color: #4F4F4F;
}
PRINT DO PROBLEMA: [https://imgur.com/a/FuYLB](https://imgur.com/a/FuYLB)Discussão (4)
Carregando comentários...