CSS - posição

Descrição

A propriedade position é usada para posicionar um elemento. Ele pode ser usado em conjunto com as propriedades superior, direita, inferior e esquerda para posicionar um elemento onde você quiser.

Valores possíveis

static - A caixa de elemento é apresentada como parte do fluxo normal do documento, seguindo o elemento anterior e os elementos seguintes anteriores.
relative - A caixa do elemento é disposta como parte do fluxo normal e, em seguida, compensada por alguma distância.
absolute - A caixa do elemento é disposta em relação ao bloco que o contém e é totalmente removida do fluxo normal do documento.
fixed- A caixa element.s está absolutamente posicionada, com todos os comportamentos descritos para posição: absoluto. A principal diferença é que o bloco que contém um elemento de posição fixa é sempre a janela de visualização.

Sintaxe DOM

object.style.position = "static";

Aplica-se a

Todos os elementos HTML.

Exemplo

Aqui está o exemplo -

<html>
   <head>
      <style type = "text/css">
         img#lead {position: absolute;}
         div.top {position: fixed; top: 0; height: 10% width: 100%;}
         sup {position: relative; bottom: 0.66em;}
      </style>
   </head>

   <body>
      <img src = "/css/images/bullet.gif">
      <div>Tutorialspoint.com</div>
      <p>This text contains <sup>superscript</sup> text.</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

↰ Previous page