MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Os seus resultados da pesquisa

    top

    « Referência CSS

    Resumo

    A propriedade top especifica o posicionamento vertical do elemento de acordo com o topo.

    Para elementos absolutamente posicionados (com a propriedade position ajustada como absolute ou fixed) especifica a distância apartir a margem superior do objeto (até onde vai o background).

    Para relativamente posicionados (com a propriedade position ajustada como relative) especifica a distância de acordo com o posicionamento do objeto se a propriedade position fosse qualquer uma que não absolute, relative ou fixed.

    • Valor inicial: auto
    • Aplica-se a: Elementos posicionados
    • Herdado: não
    • Porcentagens: Referente a altura do próximo antecedente de posição block
    • Valor computado: distância absoluta, porcentagem ou automático

    Sintáxe

    top: <length> | <percentage> | auto | inherit
    

    Exemplos

    <?xml version="1.0" encoding="utf-8"?>
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml" />
    <title>Mozilla.org altura, topo, esquerda, largura e direita - CSS</title>
    <style type="text/css">
    /* As medidas de body podem ser mudadas para px para testar o comportamento da div */
    body{
      width: 100%;
      height: 100%;
    }
    /* agora a div pode operar com porcentagem (a altura e a largura do body são a referência) */
    div{
      position: absolute;
      left: 15%;
      top: 30%;
      bottom: 30%;
      width: 70%;
      height: 40%;
      text-align: left;
      border: 3px #000 solid;
      background: #CCC;
    }
    </style>
    </head>
    <body>
    <center>
      <div>...Qualquer conteúdo...</div>
    </center>
    </body>
    </html>
    

    Notas

    top é mais relevante que bottom porque o alinhamento vertical padrão é no topo. Com mais propriedades de posicionamento, top torna-se dispensável.

    Veja mais

    position, right, bottom, left

    Etiquetas do documento e colaboradores

    Contributors to this page: Half-blood, teoli
    Última atualização por: teoli,