tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Layout - A posição de propriedade


A position propriedade especifica o tipo de método utilizado para o posicionamento de um elemento (estática, relativo, fixo ou absoluto).


A propriedade position

A position propriedade especifica o tipo de método utilizado para o posicionamento de um elemento.

Há quatro valores de posição diferentes:

  • static
  • relative
  • fixed
  • absolute

Os elementos são então posicionados usando a parte superior, inferior, esquerdo e direito propriedades. No entanto, essas propriedades não funcionará a menos que a position propriedade é definida em primeiro lugar. Eles também funcionam de forma diferente, dependendo do valor da posição.


position: static;

elementos HTML estão posicionados estática por padrão.

elementos posicionados estáticos não são afetados pela parte superior, inferior, esquerda e direito propriedades.

Um elemento com position: static; não está posicionado em qualquer maneira especial; -se sempre posicionados de acordo com o fluxo normal da página:

Este <div> elemento tem position: static;

Aqui está o CSS que é usado:

Exemplo

div.static {
    position: static;
    border: 3px solid #73AD21;
}
Tente você mesmo "

position: relative;

Um elemento com position: relative; é posicionado em relação à sua posição normal.

Definir o topo, direita e inferior, e as propriedades deixadas de um elemento relativamente posicionado fará com que ele seja ajustado fora de sua posição normal. Outro conteúdo não será ajustado para caber em qualquer lacuna deixada pelo elemento.

Este <div> elemento tem position: relative;

Aqui está o CSS que é usado:

Exemplo

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
Tente você mesmo "

position: fixed;

Um elemento com position: fixed; está posicionado em relação ao visor, o que significa que permanece sempre no mesmo lugar, mesmo que a página é rolada. A parte superior, direito, inferior e propriedades restantes são usadas para posicionar o elemento.

Um elemento fixo não deixa uma lacuna na página onde ele normalmente teria sido localizado.

Observe o elemento fixo no canto inferior direito da página. Aqui está o CSS que é usado:

Exemplo

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
Tente você mesmo "
Este <div> elemento tem position: fixed;

position: absolute;

Um elemento com position: absolute; é posicionado em relação ao antepassado mais próximo posicionado (em vez de posicionado em relação à janela de exibição, como fixo).

Contudo; se um elemento posicionado absoluta não tem antepassados ​​posicionado, ele usa o corpo do documento, e se move junto com rolagem de página.

Nota: A "positioned" elemento é aquele cuja posição é nada além de static .

Aqui está um exemplo simples:

Este elemento <div> tem position: relative;
Este <div> elemento tem position: absolute;

Aqui está o CSS que é usado:

Exemplo

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
Tente você mesmo "

sobreposição Elements

Quando os elementos são posicionados, que podem sobrepor-se outros elementos.

O z-index propriedade especifica a ordem de empilhamento de um elemento (que elemento deve ser colocado em frente, ou para trás, os outros).

Um elemento pode ter uma ordem de pilha positivo ou negativo:

Esta é uma posição

Uma vez que a imagem tem um índice z de -1, ele será colocado atrás do texto.

Exemplo

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
Tente você mesmo "

Um elemento com maior ordem da pilha é sempre na frente de um elemento com uma ordem de pilha inferior.

Nota Nota: Se dois elementos posicionados sobrepõem sem um z-index especificado, o último elemento posicionado no código HTML será mostrado no topo.

Posicionamento texto em uma imagem

Como posicionar o texto sobre uma imagem:

Exemplo

Noruega
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Tente você mesmo:

Top Left » Top Right» Inferior Esquerda » inferior direito» Centrado »

Exemplos

mais Exemplos

Definir a forma de um elemento
Este exemplo demonstra como para definir a forma de um elemento. O elemento é cortado para esta forma, e exibido.

Como mostrar estouro de um elemento usando rolagem
Este exemplo demonstra como definir a propriedade overflow para criar uma barra de rolagem quando o conteúdo de um elemento é grande demais para caber em uma área especificada.

Como configurar o navegador para tratar automaticamente estouro
Este exemplo demonstra como configurar o navegador para tratar automaticamente estouro.

Alterar o cursor
Este exemplo demonstra como alterar o cursor.


Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »


Todas as propriedades CSS de posicionamento

Propriedade Descrição
bottom Define a borda margem inferior de uma caixa posicionada
clip Clipes um elemento posicionado de forma absoluta
cursor Especifica o tipo de cursor para ser exibido
left Define a borda da margem esquerda para uma caixa posicionado
overflow Especifica o que acontece se o conteúdo transborda a caixa de um elemento
overflow-x Especifica o que fazer com os / as bordas esquerda e direita do conteúdo se ele transborda área de conteúdo do elemento
overflow-y Especifica o que fazer com o início / extremidade inferior do conteúdo se ele transborda área de conteúdo do elemento
position Especifica o tipo de posicionamento para um elemento
right Define a borda margem direita para uma caixa posicionado
top Define a borda margem superior para uma caixa posicionado
z-index Define a ordem de empilhamento de um elemento