Ir para conteúdo

POWERED BY:

Arquivado

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

amanda12

[Resolvido] colocar div a frente do body

Por , em Javascript

Recommended Posts

amanda12    0

amanda12
Postado

Pessoal tenho um script que faz com que as letras fiquem passando no html porém preciso fazer com que uma div fique na frente das letras passando e as letras por traz porem já usei z-index mas não funcionou. terai como ver se posso fazer algo mais segue abaixo o script todo.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>soaked - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		margin: 0px;
		padding: 0px;
		background: #000;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	span {
		position: absolute;
		font-family: tahoma,verdana,arial;
		font-weight: bold;
		width: 100%;
	}


</style>

<script type="text/javascript">
var O = [];

function Cobj(xs, ys, css, html){
	this.xs = xs;
	this.ys = ys;
	this.m = 1;
	this.x = xs * 10000;
	this.y = ys * 10000;
	this.o = document.createElement("span");
	this.o.innerHTML = html;
	for(var i in css)this.o.style[i] = css[i];
	document.body.appendChild(this.o);
	this.mov = function () {
		with(this) {
			if(xs!=0){
				x += xs;
				o.style.left = x+'px';
				if(xs>0 && x>document.body.offsetWidth) x = -o.offsetWidth;
				else if(xs<0 && x<-o.offsetWidth) x = document.body.offsetWidth;
			}
			if(ys!=0){
				y += ys;
				o.style.top = y+'px';
				if(ys>0 && y>document.body.offsetHeight) y = -o.offsetHeight;
				else if(ys<0 && y<-o.offsetHeight) y = document.body.offsetHeight;
			}
		}
	}
}

function run(){
	for(var i in O)O[i].mov();
	setTimeout("run();", 32);
}

onload = function(){
	O.push(new Cobj(0,1,
		{
			'color':'#606060',
			'fontSize':'100pt',
			'letterSpacing':'-5px',
			'textAlign':'center'
		},
		"DHTML"
	));

	O.push(new Cobj(0,-2,
		{
			'color':'#c0c0c0',
			'fontSize':'10pt',
			'left':'25%'
		},
		"#include <iostream.h><br>void main ()<br>{<br>   char * s;<br>   cout << ''Hello world…'' << endl<br>   << ''Am I a piece of art? (Y/N)'';<br>   cin >> s;<br>   cout << ''Well, I don't care what you think...'' << endl;<br>}"
	));

	O.push(new Cobj(-1,0,
		{
			'color':'#888',
			'fontSize':'48pt',
			'top':'25%'
		},
		"I doubt, therefore I might be."
	));

	O.push(new Cobj(3,0,
		{
			'color':'#fff',
			'fontSize':'14pt',
			'top':'55%'
		},
		"Vision is easy. Execution is hard."
	));

	O.push(new Cobj(2,0,
		{
			'color':'#ff8000',
			'fontSize':'16pt',
			'top':'65%'
		},
		"No it's not a God complex;<br>there's nothing complex about it..."
	));

	O.push(new Cobj(0,2,
		{
			'color':'#b0b0c0',
			'fontSize':'18pt',
			'left':'10%'
		},
		"Reality is that which,<br>when you stop believing in it,<br>doesn't go away"
	));

	O.push(new Cobj(0,-1,
		{
			'color':'#fff',
			'fontSize':'20pt',
			'width':'50%',
			'textAlign':'right'
		},
		"The Guide Is Definitive.<br>Reality Is Frequently Inaccurate!"
	));

	O.push(new Cobj(1,0,
		{
			'color':'#9090f0',
			'fontSize':'22pt',
			'top':'10px'
		},
		"To educate a man is to unfit him to be a slave"
	));

	O.push(new Cobj(-2,0,
		{
			'color':'#8080ff',
			'fontSize':'20pt',
			'top':'60%'
		},
		"Consistency is the last ditch stand of the unimaginative"
	));

	run();

}


</script>
</head>

<body style="z-index:-10000;">
<div id="a" style="z-index:50000; background-color:#FFFF00; margin-top:100px;">
<div id="b" style="z-index:100000; background-color:#66CC99; width:150px;" >sdf</div>
</div>
</body>
</html>

 

preciso de vcs pessoal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

z-index só funciona aliado à algum position.

Preste atenção na DIV pai de quem você quer posicionar por cima, e coloque um position: relative/absolute, com z-index maior do que a outra que tem que ficar por baixo.

Fica assim: 

<body>
<div id="a" style="z-index:5; position:relative; background-color:#FFFF00; margin-top:100px;">
<div id="b" style="z-index:10; background-color:#66CC99; width:150px;" >sdf</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tranquilo amanda12, mas só veja na hora de postar as dúvidas, esse foi mais sobre HTML, já que position, e z-index são propriedades CSS.

Agiliza o pessoal lhe responder...

 

Que bom que resolveu :lol:

Força ae!

Compartilhar este post

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

Informação importante

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

  Aceito