• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

zero-cool

Prioridade de uma div

9 mensagens neste tópico

Boas,

Estou a tentar colocar uma div independente do restante layout do site (tabelas, etc). Em termos de comparação, estou a tentar que a div fique como o "enviar para trás" do word.

Alguém sabe como posso fazer isso? Tenho tentado, mas interfere-me com o conteúdo que já lá existe (nomeadamente uma tabela), deformando tudo.

Abraço,

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Espero que te ajude , tens de usar o z-index



<!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" >
<head><title>
Untitled Page
</title><link href="/WebToolsTest/WebResource.axd?d=2hnRYa_-vRnGKi2CA_5o2HXlJwvmvUwh7qslaTZvS3mw2XHOc2sxxGUlDQJ0bxKhitJejyj8x_pY9EpkV4yX8dCWLZXCeU7B5ssfCCsDHcU1&t=633239888870275000" rel="stylesheet" type="text/css" /><link href="/WebToolsTest/WebResource.axd?d=2hnRYa_-vRnGKi2CA_5o2HXlJwvmvUwh7qslaTZvS3mw2XHOc2sxxGUlDQJ0bxKhitJejyj8x_pY9EpkV4yX8dCWLZXCeU7B5ssfCCsDHcU1&t=633239888870275000" rel="stylesheet" type="text/css" /><link href="/WebToolsTest/WebResource.axd?d=2hnRYa_-vRnGKi2CA_5o2HXlJwvmvUwh7qslaTZvS3mw2XHOc2sxxGUlDQJ0bxKhitJejyj8x_pY9EpkV4yX8dCWLZXCeU7B5ssfCCsDHcU1&t=633239888870275000" rel="stylesheet" type="text/css" /><link href="/WebToolsTest/WebResource.axd?d=2hnRYa_-vRnGKi2CA_5o2HXlJwvmvUwh7qslaTZvS3mw2XHOc2sxxGUlDQJ0bxKhitJejyj8x_pY9EpkV4yX8dCWLZXCeU7B5ssfCCsDHcU1&t=633239888870275000" rel="stylesheet" type="text/css" />


</head>

<body style="width:100%; height:100%">



<form name="form1" method="post" action="default.aspx" id="form1">

<div style="z-index:0; background-color:red; position:absolute; top:10px;left:10px; width:200px; height:100px;" >

</div>

<div style="z-index:1; background-color:green; position:absolute; top:25px;left:25px; width:200px; height:100px;" >

</div>

<div style="z-index:-1; background-color:blue; position:absolute; top:50px;left:50px; width:200px; height:100px;" >

</div>  

</form>

</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É usares o z-index como o seesharptec disse. Quanto mais alto for o valor, mais perto do utilizador está. :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Não me referia a isso.

Na imagem em baixo.. reparem na tabela (que devia estar centrada), e não está porque a div lateral (direita) está presente. O que pretendia é que a div continuasse lá, mas não me deslocasse os restantes elementos.

Estou a usar o seguinte código:

<div align="center" style="border:solid 1px #000000;z-index:0;height:400px;width:150px;position:relative;clear:both;float:right;top:10px;right:10px;visibility:visible;overflow:visible;">

Abraços,

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ninguém sabe..?  :) Já não sei que mais voltas ei-de dar a isto..

Abraço,

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

se tens o z-index a zero é como se a div estivesse "pousada" no conteúdo normal do site... tens de colocar um valor de 10, por exemplo... o z-index funciona como a 3ª coordenada, da altura... se está a zero, está à "altura" de todos os outros elementos que não têm z-index definido, que assume zero...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

se tens o z-index a zero é como se a div estivesse "pousada" no conteúdo normal do site... tens de colocar um valor de 10, por exemplo... o z-index funciona como a 3ª coordenada, da altura... se está a zero, está à "altura" de todos os outros elementos que não têm z-index definido, que assume zero...

Obrigado pela rápida resposta.

Mesmo colocando um valor superior, acontece-me sempre a mesma coisa.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu faria uma div que englobaria a tabela e o que quisesse que ficasse a esse nivel

Depois outra outra estaria o resto

Por fim alem de usar o z-index; Utilizaria a position:absolute;e  left:xxxpx, top:xxxpx ou o rigth:xxxpx  , bottom:xxxpx

Ve la se assim te entendes

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Yep, o z-index se não me engano só entra em acção em elementos posicionados absolutamente e floats (já não tenho tanta certeza em relação á isso).

Portanto, position: absolute; na div deve ajudar.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora