Ordenação De Camadas

calipso · Maio 27, 2004

Pessoal estou com um problema.

Tenho um "list" que ocupa uma boa parte da pagina. Atraves de um link chamarei uma função javascript que oculta ou mostra uma "div", que deverá estar posicionada em frente ao "list". O problema é que não consigo colocar a div na frente do list... a div fica sempre por baixo... não sei mais o que fazer.

Alguém sabe como soluciono isso???

Agradeço a atenção.

Calipso

Fabi SP · Maio 27, 2004

Se você está usando a tag <SELECT> para a lista em questão, sinto-lhe informar, mas o IE tem um sério bug em relação à posicionamento de elementos por cima dele. Por uma questão misteriosa, é IMPOSSÍVEL colocar um div, por exemplo, sobrepondo um elemento <SELECT>. Nem se você modificar o z-index deles via CSS.

A solução é fazer uma gambiarra. É feio, mas é a solução...

Se este for mesmo o seu caso, me avise. Aí eu posto como resolver este problema.

Até mais,

Illidan · Maio 27, 2004

Fabi, o Skin tava com o mesmo problema... veja o post dele:

http://scriptbrasil.com.br/forum/index.php?showtopic=21464

Seria legal você postar como seria essa gambiarra

Até mais, um abraço!

Fabi SP · Maio 27, 2004

A solução (ou gambiarra, melhor dizendo), é colocar o conteúdo dentro de um <iframe> e ele, dentro de um <div>.

Este é o código para a página principal, poderia ser nomeada "principal.htm":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Lab</title>
	<meta name="author" content="Fabiana Akemi Fukuda" />
	<meta name="keywords" content="CSS, xHTML" />
	<meta name="description" content="Testando CSS..." />
	<style type="text/css">
  div.quadro {
  	height:300px;
  	left: 40px;
  	position: absolute;
  	top: 20px;
  	width:300px;
  }
	</style>
</head>
<body>
	<select name="cmb1" id="cmb1">
  <option>Opção 1</option>
  <option>Opção 2</option>
	</select>
	<div class="quadro">
  <iframe frameborder="0" src="info.htm"></iframe>
	</div>
</body>
</html>

O código para o conteúdo do suposto div, que você quer que sobreponha o <select> (deve ser nomeado para "info.htm" e deve estar no mesmo diretório, neste caso):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Lab</title>
	<meta name="author" content="Fabiana Akemi Fukuda" />
	<meta name="keywords" content="CSS, xHTML" />
	<meta name="description" content="Testando CSS..." />
	<style type="text/css">
  body {
  	background-color: #ff0;
  }
	</style>
</head>
<body>
	<p>Este é o conteúdo que quero sobrepor...</p>
</body>
</html>

Como no outro post que o Illidan citou, o pessoal sugeriu também, ocultar o <select> da página. É uma solução bem mais simples e eficaz.

Espero que ajude!

Illidan · Maio 27, 2004

hmmm, obrigado pela solução...

Eu tava desconfiando que isso fosse um bug, mesmo... mas não sabia que era exclusividade do IE!

Fabi SP · Maio 27, 2004

Illidan,

Existem muitas referências por aí dizendo que o elemento <select> tem z-index infinito, e blá-blá-blá, mas a grande verdade é: bug no IE. No FireBird (Mozilla), por exemplo, esse problema não ocorre.

O pior é que a Microsoft nem se preocupa em corrigir esse incômodo bug que já está em 6 versões do produto... coisas MS...

Até mais,

P.S.: será que aquele rapaz que estava com o mesmo problema chegou a ver este post?

Entrar

Ordenação De Camadas

Pergunta

calipso

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Fabi SP

Link para o comentário

Compartilhar em outros sites

Illidan

Link para o comentário

Compartilhar em outros sites

Fabi SP

Link para o comentário

Compartilhar em outros sites

Illidan

Link para o comentário

Compartilhar em outros sites

Fabi SP

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades