Positions

[ericolvr 0]

Boa tarde pessoal.

Estou desenvolvendo um projetinho e estou usando algumas divs com position:fixed o pq dessas divs é um carousel/slider que passa no background.

 

uma parte do ccs é essa:

.slides_container {
position: fixed; 
width: 100%;
height: 100%;
z-index: 1;
top: 0;
left: 0;
}

.slides_container div {
position: fixed; 
width: 100%;
height: 100%;
display: block;
z-index: 2;
top: 0;
left: 0;
}

/* FIM SLIDER BACKGROUND  */


#circle{
position: fixed;
top: 40px;
left: 40px;
width: 80px;
height: 70px;
border-radius: 60px;
background: #EF3836;
z-index: 5;
display: none;
padding: 50px 0 0 40px;
}

#circle:hover{ background: #FFF;}

#menu{
position: fixed;
width: 249px;
height: 2000px;	
background: url(../img/bg-menu.png) repeat;
overflow: hidden;
border-right: 1px solid #212121;
z-index: 7;
}

#conteudo{
position: fixed;
left: 250px;
top: 40px;
width: 710px;
height: 1000px;
background: url(../img/bg-menu.png) repeat; 
overflow: hidden;
z-index: 10;
}

 

HTML

<a href="#" id="mostra"><div id="circle"></div></a>
<div id="menu">
  <img src="{{ MEDIA_URL }}img/fake-logo.png" />

<ul class="navigation">
<li><a href="/" title="Home">Home</a></li>
{% for categoria in categs %}
<li><a href="/categoria/{{ categoria.marcador }}/" title="">{{ categoria.categoria }}</a></li>
{% endfor %}
</ul><!--ul navigation -->


<a href="#" id="fecha">abrir menu</a>
</div><!--menu -->


<div id="conteudo">
{% for fotografia in categoria.fotografia_set.all %}
<div class="item">
<a class="fancybox" href="{{ fotografia.original_url }}" title="{{ fotografia.nome }}" rel="group"<img src="{{ {{ fotografia.thumbnail_url }}" alt="{{ fotografia.nome }}" />			</a>				</div>
{% endfor %}

</div><!--conteudo -->

 

 

Tem uma exibição de slides no background, um #menu que esta fixo na lateral esquerda, e a div #conteudo do lado

direito do #menu

 

 

Não tive problemas até o moemnto em que precisei usar o Fanncybox-lightbox, o verlay de ambos aparecem atras das divs e classes, ou seja, por baixo.. Dando uma olhada no css do fancybox chequei que as propriedades "z-index" do mesmo são maiores que as que estou usando nas divs..

 

Alguém pode dar uma força?

 

Ou um tuto de como fazer um slider(em background) de forma que não atrapalhe o conteudo que está "por cima"?

Aqui da pra daruma olhada

[Dusigner 0]

Olá!

 

Observei que o seu slides do background tem a propriedade:

 

position: absolut;
(javascript que cria esta propriedade)

 

O JavaScript cria uma DIV dentro da DIV .slides_control e joga o position: absolut

 

Isso faz a DIV que fica dentro da DIV.slides_control sobrepor o FancyBox,

 

Solução existe! mas fica difícil de arrumar uma sem ter os arquivos!

 

hospeda um Zip! Talvez consiga te ajudar!

 

flw