Posicionamento de div sobre Slideshow

Carlos Rocha · Abril 24, 2018

Bom Dia!

Tenho a seguinte página

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="_css/aos.css">
<link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css">
<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/jquery.cycle2.min.js"></script>
<style>
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
	font-family: 'Open Sans';
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}
img {
	border: 0;
	max-width: 100%;
}
ul {
	list-style: none;
}
ul li {
	display: inline;
}
.aos-all {
	width: 1000px;
	max-width: 98%;
	margin: 10vh auto 0 auto;
}
.aos-item {
	display: inline-block;
	float: left;
	width: 40%;
	height: 300px;
	padding: 20px;
}
.aos-item__inner {
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	background: #1da4e2;
	line-height: 260px;
	text-align: center;
	color: #fff;
}

@media screen and (max-width: 800px) {
.aos-item {
	width: 50%;
}
}
.logo {
	width : 432px;
	-webkit-animation : logo-anim 1s;
	-moz-animation : logo-anim 1s;
	-o-animation : logo-anim 1s;
	animation : logo-anim 1s;
}
 @-webkit-keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}
 @-moz-keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}
 @-o-keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}
 @keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}
.logo-atividades {
	position : absolute;
	top : 0;
	center : 0;
	width : 100%;
	height : 500px;
	text-align : center;
	overflow : hidden;
	z-index : 20;
}
.atividades {
	color : #FFF;
	height : 115px;
	overflow : hidden;
	position : absolute;
	top : 80%;
	margin-top : -176px;
	width : 100%;
	pointer-events : none;
	text-align : center;
	z-index : 10;
}
.atividades a {
	text-decoration : none;
}

.atividades ul {
	list-style : none;
	padding : 0;
	margin : 10px 0 0;
	position : relative;
	height : 100px;
	font-size : 36px;
	font-weight : 300;
	text-align : center;
	font-family : 'Lato', sans-serif;
	letter-spacing : 5px;
	text-transform : uppercase;
	z-index : 100;
}
.atividades ul li {
	width : 100%;
	text-align : center;
	position : absolute;
	opacity : 0;
	top : 85px;
	line-height : 100px;
	-webkit-transition : all 0.5s ease-in-out;
	-moz-transition : all 0.5s ease-in-out;
	-o-transition : all 0.5s ease-in-out;
	transition : all 0.5s ease-in-out;
	transition-timing-function : ease;
	-webkit-transition-timing-function : ease; /* Safari and Chrome */
}
.atividades ul li.ativa {
	opacity : 1;
	top : 0;
	-webkit-transition : all 1s ease-in-out;
	-moz-transition : all 1s ease-in-out;
	-o-transition : all 1s ease-in-out;
	transition : all 1s ease-in-out;
	transition-timing-function : ease;
	-webkit-transition-timing-function : ease; /* Safari and Chrome */
}
}
</style>
</head>
<body>
  <div class="cycle-slideshow"
           data-cycle-fx=fadeout
           data-cycle-timeout=5000
           data-cycle-pause-on-hover="true"
           data-cycle-slides="div.slide">
  
          <div class="logo-atividades">
            <div style="margin-top: 100px;"> 
              <a href="http://www.funerariasaopedro.net.br"> 
                <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> 
              </a>
              <div class="atividades">
                <ul>
                  <li class="ativa">Agência Funerária</li>
                  <li>Funerais</li>
                  <li>Cremações</li>
                  <li>Trasladações</li>
                  <li>Tanatopraxias</li>
                  <li>Exumações</li>
                  <li>Artigos Religiosos</li>
                  <li>Atendimento 24h</li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- prev/next links -->
          <div class="cycle-prev"></div>
          <div class="cycle-next"></div>
          <div class="cycle-pager"></div>
          <div class="slide"> <img  src="_img/_banner/_site/1.png" /> </div>
          <div class="slide"> <img  src="_img/_banner/_site/2.png" /> </div>
          <div class="slide"> <img  src="_img/_banner/_site/3.png" /> </div>
          <div class="slide"> <img  src="_img/_banner/_site/4.png" /> </div>
  </div>
  <div class="aos-item" data-aos="fade-right">
    <div class="aos-item__inner">
      <h3>Esquerda</h3>
    </div>
  </div>
  <div class="aos-item" data-aos="fade-left">
    <div class="aos-item__inner">
      <h3>Direita</h3>
    </div>
  </div>
  <div class="aos-item" data-aos="fade-up">
    <div class="aos-item__inner">
      <h3>Baixo Cima</h3>
    </div>
  </div>
  <div class="aos-item" data-aos="fade-down">
    <div class="aos-item__inner">
      <h3>Cima Baixo</h3>
    </div>
  </div>
  <div class="aos-item" data-aos="fade-in">
    <div class="aos-item__inner">
      <h3>Baixo Cima</h3>
    </div>
  </div>
  <div class="aos-item" data-aos="fade-in">
    <div class="aos-item__inner">
      <h3>Cima Baixo</h3>
    </div>
  </div>
  <script>
      function homeTitleAnimation(){
          var interval;
          var counter = 1;
          var myFunc = function() {
              var cur = $('.atividades ul li').length;
              if(cur == counter) {
                  $('.atividades ul li.ativa').removeClass('ativa');
                  $('.atividades ul li').first().addClass('ativa');
                  counter = 1;
              } else {
                  counter++;
                  $('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa');
  
              }
          };
          interval = setInterval(myFunc, 4000);
      }
  
      homeTitleAnimation();  
  </script>
  
  <script src="_js/aos.js"></script> 
  <script>
          AOS.init({
            easing: 'ease-in-out-sine'
          });  
  </script> 
 </body>
</html>

Tudo funciona corretamente com exceção do posicionamento da logo e da ul que rodam sobre o Slideshow que não estou conseguindo posiciona-los sobre o Slideshow.

 <div class="cycle-slideshow"
           data-cycle-fx=fadeout
           data-cycle-timeout=5000
           data-cycle-pause-on-hover="true"
           data-cycle-slides="div.slide">
  
          <div class="logo-atividades">
            <div style="margin-top: 100px;"> 
              <a href="http://www.funerariasaopedro.net.br"> 
                <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> 
              </a>
              <div class="atividades">
                <ul>
                  <li class="ativa">Agência Funerária</li>
                  <li>Funerais</li>
                  <li>Cremações</li>
                  <li>Trasladações</li>
                  <li>Tanatopraxias</li>
                  <li>Exumações</li>
                  <li>Artigos Religiosos</li>
                  <li>Atendimento 24h</li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- prev/next links -->
          <div class="cycle-prev"></div>
          <div class="cycle-next"></div>
          <div class="cycle-pager"></div>
          <div class="slide"> <img  src="_img/_banner/_site/1.png" /> </div>
          <div class="slide"> <img  src="_img/_banner/_site/2.png" /> </div>
          <div class="slide"> <img  src="_img/_banner/_site/3.png" /> </div>
          <div class="slide"> <img  src="_img/_banner/_site/4.png" /> </div>
  </div>

Onde estou errando?

Esse código pode ser visto em :

http://funerariasaopedro.net.br/novo/

Na página, se derem um ctr+a, poderão notar no canto direito e abaixo do slide, a ul rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro.

Com relação à logomarca que está escondida atrás do slide, sua posição é acima do slide e acima da ul

Entrar

Posicionamento de div sobre Slideshow

Pergunta

Carlos Rocha

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades