Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Css 7 Pos Fixo Abs

    Enviado por

    louvores louvores
    15 visualizações10 páginas
    O documento discute posicionamento de elementos em CSS, incluindo posicionamento estático, fixo e absoluto. Posicionamento estático é o padrão, elementos seguem o fluxo normal da página. Posicionamento fixo mantém elementos na mesma posição mesmo quando a página é rolada. Posicionamento absoluto posiciona elementos em relação ao primeiro elemento de posição não estática que os contém.

    Descrição original:

    Título original

    css-7-pos-fixo-abs

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    O documento discute posicionamento de elementos em CSS, incluindo posicionamento estático, fixo e absoluto. Posicionamento estático é o padrão, elementos seguem o fluxo normal da página. Posicionamento fixo mantém elementos na mesma posição mesmo quando a página é rolada. Posicionamento absoluto posiciona elementos em relação ao primeiro elemento de posição não estática que os contém.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    15 visualizações10 páginas

    Css 7 Pos Fixo Abs

    Enviado por

    louvores louvores
    O documento discute posicionamento de elementos em CSS, incluindo posicionamento estático, fixo e absoluto. Posicionamento estático é o padrão, elementos seguem o fluxo normal da página. Posicionamento fixo mantém elementos na mesma posição mesmo quando a página é rolada. Posicionamento absoluto posiciona elementos em relação ao primeiro elemento de posição não estática que os contém.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 10

    Instituto Federal de Educação Ciência e Tecnologia

    Curso Técnico Integrado em Informática


    Campus Currais Novos

    Desenvolvimento Web
    CSS – Posicionamento fixo e absoluto

    Professor: Bruno E. G. Gomes

    2013
    Medidas de Comprimento
     Medidas relativas – variam conforme a resolução da tela
     Pixels (px) – dependente do dispositivo
     Relativas ao tamanho da fonte:
     em (mesmo tamanho que o tamanho da fonte para o elemento em que ela está inserida)
     ex (altura da letra “x”minúscula para a fonte do elemento em que ela está inserida)
     Percentagem (%)

     Medidas absolutas – variação de tamanho não é baseadas nas


    propriedades do sistema (não é herdade, não é relativa a outra
    medida)
     Polegadas (in)
     Centímetros (cm)
     Milímetros (mm)
     Pontos (pt) – 1 pt = 1/72 in
     Paicas (pc) – 1 pc = 12 pt
    Posicionamento
     Antes de CSS era difícil controlar o posicionamento
    dos elementos na página
     Posicionamento era determinado pelo navegador

     Com CSS podemos ter um controle preciso da


    posição dos elementos da página

     Posicionamento pode ser:


     Estático

     Fixo

     Relativo

     Absoluto
    Posicionamento estático
     É o posicionamento padrão

     Elementos são inseridos de acordo com o fluxo


    normal de inserção de elementos na página

     Elementos não são afetados pelas propriedades


    de posicionamento top, bottom, left, and right
    Posicionamento Fixo
     Posição é fixa com relação à janela do navegador

     Mesmo que a janela de conteúdo do navegador seja


    movida para cima ou para baixo com a barra de rolagem,
    a posição do elemento não é modificada

     Elementos com posição fixa são removidos do fluxo


    normal da página
    O documento e outros elementos se comportam como se o
    elemento fixo não existisse
     Elementos de posição fixa podem sobrepor outros elementos
    Posicionamento fixo – exemplo
    p.fixed
    {
    position:fixed;
    top:30px;
    right:5px;
    }
    img.fixed
    {
    position:fixed;
    top:30px;
    right:5px;
    }
    Posicionamento Fixo – Aplicando CSS do Slide
    anterior
    Diminua um pouco a janela ou adicione mais parágrafos
    <p>Texto normal</p> para ver que a posição do parágrafo e
    da imagem inseridos com a classe fixed não será alterada

    <body>
    <p class = "fixed">Texto fixo</p>

    <p>Texto normal</p>
    <p>Texto normal</p>
    <p>Texto normal</p>
    <p>Texto normal</p>
    <p>Texto normal</p>
    <p>Texto normal</p>

    <p><img class = "fixed" src="fgimg.gif“ alt = "Imagem fixa" />


    </p>
    </body>
    Posicionamento absoluto
     Elemento é posicionado em relação à posição do primeiro
    elemento que o contém
     desde que a posição desse elemento não seja estática;
     Caso esse elemento não exista, a posição do elemento absoluto é
    relativa com relação ao elemento <html>

     Utilização
     Atributo absolute

     Elemento é movido do fluxo normal e pode sobrepor outros


    elementos

     Atributo z-index: controla a exibição dos elementos em


    camadas
     Elementos com z-index mais alto são exibidos à frente dos
    elementos com z-index mais baixo
    Exemplo
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
    h2 {
    position:absolute;
    left:100px;
    top:150px;
    }
    </style>
    </head>
    <body>
    <h2>Cabeçalho inserido com posicionamento absoluto</h2>
    <p>Com o posicionamento absoluto um elemento pode ser colocado
    em qualquer lugar em uma página. O cabeçalho "acima" está posicionado
    100 pixels às esquerda da página e 150px ao topo. </p>
    </body>
    </html>
    Exercício – Posicionamento absoluto de uma tag
    com relação a outra que a contém
     Crie um XHTML contendo um parágrafo e uma imagem dentro desse
    parágrafo
    – As definições CSS para o posicionamento do parágrafo e da
    imagem podem ser obtidas abaixo:

    p { position:absolute;
    left:100px;
    top:150px;
    }
    img {
    position:absolute;
    left:20px;
    top:20px;
    }

    Você também pode gostar