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

n_digo

o que é REALATIVE, ABSOLUTE

6 mensagens neste tópico

HI...

qual a diferenca entre o Position: RELATIVE e o ABSOLUTE...

e como fica os div se eu meter um div dentro de outro um ABSOLUTE, o outro RELATIVE, e o contrario?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Quando usas um relative, a posição desse elemento é medida relativamente ao elemento pai. Quando usas um absolute, a posição do elemento é medida relativamente à área de visualização do browser.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

e como fica os div se eu meter um div dentro de outro um ABSOLUTE, o outro RELATIVE, e o contrario?

isso vai depender de outros atributos. podes colocar top,bottom,left,right : medida, que correspondem ao espaço a acrescentar em cima, em baixo, a esquerda ou à direita respectivamente.

<div style="position:relative; top:10px; left:10px"> por exemplo faz o div deslocar-se 10pixels para baixo e 10 pixels para a direita a partir da sua localização por defeito

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Quando usas um relative, a posição desse elemento é medida relativamente ao elemento pai. Quando usas um absolute, a posição do elemento é medida relativamente à área de visualização do browser.

Isso é verdade até certa medida, no caso de um elemento com posição absoluta contido num elemento com posição relativa, o seu posicionamento vai ser em relativo ao pai e não relativo à área de visualização do browser.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Este é o tipo de coisas que eu acho que as pessoas deveriam procurar na documentação...

A especificação do CSS é pública (http://www.w3.org/TR/CSS21/).

Na especificação há vários capítulos que falam da formação visual e que abordam especificamente o posicionamento. Ganhas muito mais em ler a documentação (ficas com maior compreensão e mais precisa) e só depois disso recorrer a foruns no caso de continuares com dúvidas... Aliás até se torna mais fácil e frutuoso explicar quando as pessoas já têm algum conhecimento. E já agora, experimentar também ajuda...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já agora, a quote do link do falco:

The values of this property have the following meanings:

static

    The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.

relative

    The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

absolute

    The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed

    The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and doesn't move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

    Example(s):

     

    @media screen {

      h1#first { position: fixed }

    }

    @media print {

      h1#first { position: static }

    }

    UAs must not paginate the content of fixed boxes. Note that UAs may print invisible content in other ways. See "Content outside the page box" in chapter 13.

User agents may treat position as 'static' on the root element.

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