Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

inf

Problema com imagem (atras das outras)

Por , em Desenvolvimento frontend

Recommended Posts

inf    0

inf
Postado

Olá a todos, estou desenvolvendo um web site, para um jogo, e estou com um problema, uma certa imagem, fica por trás de outras duas imagens, e preciso que ela fique na frente delas.

 

Forma errada:

 

azq0.png
Forma que preciso deixar:

kvyo.png
código CSS:

 

 

*{margin:0;}
#global{
width:1366px;
height:0 auto;
}
#Topo{
background:url(../imagens/topo_1.png);
width:1366px;
height:90px;
}
#margin{
padding-top:18px;
padding-left:795px;
}
#botao_lo{
background:url(../imagens/botao_lo.png) no-repeat;
width:165px;
height:53px;
padding-left:183px;
}
#botao_la{
background:url(../imagens/botao_la.png) no-repeat;
width:165px;
height:53px;
}
#logo_mesh{
width:700px;
height:205px;
padding-top:20px;
padding-left:100px;
}
#logo{
background:url(../imagens/logo.png);
width:260px;
height:205px;
}
#fundo_claw{
padding-top:20px;
padding-left:154px;
}
#fundo_1{
background:url(../imagens/fundo_2.png);
width:1026px;
height:972px;
}
#fundo_2{
background:url(../imagens/fundo_1.png);
width:1026px;
height:64px;;
}
#download_paract{
}
#download_1{
background:url(../imagens/download_1.png) no-repeat right;
width:1130px;
height:101px;
}
#menu_error{
padding-top:8px;
padding-left:20px;
}
#inicio{
background:url(../imagens/inicio.png);
width:100px;
height:50px;
}
#noticias{
background:url(../imagens/noticias.png);
width:100px;
height:50px;
}

 

codigo html:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body background="imagens/backgound.png">
<!-- GLOBAL -->
<div id="global">
<!-- TOPO -->
<div id="Topo">
<div id="margin">
<div id="botao_lo">
<div id="botao_la">
</div>
</div>
</div>
</div>
<!-- BANNER -->
<div id="logo_mesh">
<div id="logo">
</div>
</div>
<!-- CONTEUDO -->
<div id="download_paract">
<div id="download_1">
<div id="fundo_claw">
<div id="fundo_1">
<div id="fundo_2">
<div id="menu_error">
<div id="inicio">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
><!-- RODAPE -->
<div></div>
</div>
</body>
</html>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

casipe    10

casipe
Postado

É como Lucastas2 disse, use z-index; no css da imagem que deseja ficar na frente

 

A imagem que estive com z-index com o maior número este ficará mais a frente.

 

No exemplo abaixo, fundo_1 ficará atrás de fundo_2

#fundo_1{
background:url(../imagens/fundo_2.png);
width:1026px;
height:972px;
z-index:10;
}
 
#fundo_2{
background:url(../imagens/fundo_1.png);
width:1026px;
height:64px;
z-index:11;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito