CSS

Thread.start() Membro desde: 29/12/2011 13:34:41 Mensagens: 25 Offline

Olha bem o código abaixo:

A div1 está 20px da esquerda e topo
A div2 está 20px da esquerda e 40px do topo

Se você colocar o valor de topo da div2 igual ao da div1 verá que a div2 ficará exatamente no lugar da div1
É por isto que a posição é absoluta, e não depende de elemento pai nenhum.

ECO2004 wrote:

Se você botar um elemento como position absolute, o pai não vai crescer automaticamente de nenhuma maneira, você teria q setar o height manualmente

Botando como absolute, o elemento passa a se posicionar de acordo com a página em si, há menos que algum pai desse elemento tenha uma posição diferente de static. O que normalmente se faz quando se quer posicionar um elemento em relação à outro é botar position: relative no pai (oq não altera em nada se vc não mexer no top/bottom/left/right) e o filho com absolute

Mas para oq você quer não use absolute, use o código do antitribus

Mas quando eu estou criando uma página com elementos em posições complexas, muitas das vezes eu tenho que usar uma posição em relação ao pai.

Se eu colocar o elemento pai como relative (posição com relação ao fluxo normal) e colocar o filho como absolute, o que muda?

Correção antitribus

A posição absolute depende sim do pai, contanto que exista algum pai com posição sem ser static (por ex: relative)

Experimenta criar um pai com position: relative e botar um filho com position: absolute e top: 0; left: 0. O filho vai estar no canto superior esquerdo do elemento pai e não da página

Thread.start() Membro desde: 29/12/2011 13:34:41 Mensagens: 25 Offline

De fato você está certo!

victorcosta wrote:Correção antitribus

A posição absolute depende sim do pai, contanto que exista algum pai com posição sem ser static (por ex: relative)

Experimenta criar um pai com position: relative e botar um filho com position: absolute e top: 0; left: 0. O filho vai estar no canto superior esquerdo do elemento pai e não da página

JavaEvangelist Membro desde: 06/11/2006 01:11:23 Mensagens: 308 Offline

Pessoal, olha a minha dúvida...

Eu coloquei o label Usuário com position:absolute e fiz o mesmo com o input. Pelo que sei e me foi explicado, esses dois elementos saem do fluxo normal da página e o seu posicionamento fica em relação ao seu sucessor que não tenha position:static (nesse caso, é div). Esperava com esse teste que o label e o input se sobrepusessem, mas isso não ocorre. O input está sempre uma linha acima do label. Por quê?

Por padrão elementos <p> tem uma margin vertical, e essa margin tá fazendo eles não sobreporem

Adiciona isso ao labelusuário que acho q vai fazer oq vc quer, apesar de que pelo que to entendendo da sua tela, não é algo que eu faria

Pra ver coisas desse tipo e descobrir que o problema era a margem, ideal era vc usar o Chrome ou Firefox com Firebug, que ai era só clicar no element e clicar: Inspect Element

JavaEvangelist Membro desde: 06/11/2006 01:11:23 Mensagens: 308 Offline

victorcosta wrote:Por padrão elementos <p> tem uma margin vertical, e essa margin tá fazendo eles não sobreporem

Adiciona isso ao labelusuário que acho q vai fazer oq vc quer, apesar de que pelo que to entendendo da sua tela, não é algo que eu faria

margin: 0; z-index: 10

Pra ver coisas desse tipo e descobrir que o problema era a margem, ideal era vc usar o Chrome ou Firefox com Firebug, que ai era só clicar no element e clicar: Inspect Element

Victor...na verdade, quero o label na frente do input, mas isso não está acontecendo...sempre o label fica embaixo do input. É por causa dessa barra vertical do p? A posição top:0 e left:0 foi só um teste...

Aqui o label ficou na frente

Vc usou o z-index? Ele serve pra isso, quem tem z-index maior fica na frente

This message was edited 1 time. Last update was at 09/01/2012 17:44:14

victorcosta wrote:Aqui o label ficou na frente

Vc usou o z-index? Ele serve pra isso, quem tem z-index maior fica na frente

O z-index serve mesmo para colocar um elemento na frente do outro, mas o que mostrei no exemplo foi que o label e o input ficam em linhas separadas. É só vc mudar a ordem do left, deixando o top fixo que você irá ver que não ficam na mesma linha, mesmo distanciando os dois...mas quando eu coloco position:relative, consigo colocar os dois lado a lado.

Por que com position:absolute não dá certo?

JavaEvangelist Membro desde: 06/11/2006 01:11:23 Mensagens: 308 Offline

victorcosta wrote:Por padrão elementos <p> tem uma margin vertical, e essa margin tá fazendo eles não sobreporem

Adiciona isso ao labelusuário que acho q vai fazer oq vc quer, apesar de que pelo que to entendendo da sua tela, não é algo que eu faria

margin: 0; z-index: 10

Pra ver coisas desse tipo e descobrir que o problema era a margem, ideal era vc usar o Chrome ou Firefox com Firebug, que ai era só clicar no element e clicar: Inspect Element

@victorcosta

Muito boa essa sua dica do firebug. Pude ver o envoltório vertical que o elemento p tem. Mesmo assim, gostaria de uma ajuda sua, ou de outras pessoas que estão lendo. Eu consegui arrumar, fazendo com que o elemento input ficasse 1em do topo (ainda usando position:absolute). Como a posição é absoluta com relação ao div, uma colocação de left:0em e top:0em faria com que esse elemento ficasse bem no canto superior esquerdo da div (representada por um retângulo cinza). Como o elemento p possui o envoltório vertical, o início do envoltório está realmente onde deveria estar: no topo esquerdo da div de fundo cinza. Quando mudo position para relative, p inicia no topo da página. Mas pelo que sei, um elemento posicionado relativamente irá ter uma posição relativa à posição que deveria estar no fluxo. Assim, eu esperaria que esse label, junto com o envoltório vertical, ficasse com o seu limite superior dentro da div. Por que isso não acontece?

Notícias, artigos e o maior fórum brasileiro sobre Java