Posicionamento Propriedades de Cascading Style Sheets (CSS)
Os atributos de posicionamento de CSS são usados principalmente para camadas de estilo usando a tag, embora você também pode usá-los para estilizar a posição de uma imagem, recipiente, ou elemento de nível de bloco dentro do navegador. Para camadas, tanto os conteúdos, bem como o recipiente pode ser denominado com atributos nesta categoria.
posição: Determina como um elemento de estilo deve ser posicionado em uma janela do navegador. Especificar se a posição é absoluto, fixo, relativo, ou estático.
#footer {position: relative-}Ao definir a posição, use um dos seguintes valores de estilo:
absoluto: Define a posição do elemento absolutamente com base nos valores numéricos introduzidos para o elemento de colocação em relação à borda superior esquerda da janela do navegador, ou para o elemento pai absoluta ou relativamente posicionado mais próximo.
fixo: Define a posição do elemento absolutamente com base nos valores numéricos introduzidos para o elemento de posicionamento em relação à borda superior esquerda da janela do navegador.
relativo: Define a posição do elemento pelos valores numéricos introduzidos para o objeto do posicionamento relativo à posição do elemento de estilo em fluxo de texto do arquivo.
estático: Define o elemento em uma localização exata no fluxo de texto.
largura: Use este atributo para definir a largura de um elemento, tal como uma camada ou outro recipiente, através da utilização px, pt, dentro, cm, milímetros, pc, em, ex, %, ou auto.
# Layer1 {width: 760px;}altura: Utilize este atributo para definir a altura de um elemento, como uma camada, usando px, pt, dentro, cm, milímetros, pc, em, ex, %, ou auto.
# Layer1 {height: 100px;}visibilidade: Este atributo determina o valor inicial de visibilidade de um elemento, que pode ser definido como escondido, herdar, ou visível, quando a página é aberta pela primeira vez em uma janela do navegador.
# Layer1 {visibilidade: hidden-}A visibilidade não deve ser confundido com o exibição atributo, que determina se um elemento deve ser tratado como um bloco ou um elemento em linha ou ser totalmente ignoradas pelo navegador com a display: none; atributo. Com a visibilidade, você está lidando com o estado de visibilidade inicial de um elemento, como uma camada, quando a página é carregada pela primeira vez no navegador.
Este atributo também pode ser ligado e desligado usando javascript para ocultar e mostrar elementos na página, dando assim um pouco de interatividade para a página para o visitante.
Para modificar a visibilidade do seu elemento, adicionar a propriedade visibilidade ao seu seletor CSS com um dos seguintes valores:
escondido: Esta opção esconde uma camada de exibir quando uma página é aberta inicialmente em um navegador.
herdar: Esta opção faz com que qualquer camada para herdar a visibilidade de um Camada- pai se um pai não existe, a camada será visível. Quando a visibilidade é indeterminado, herdar é o atributo padrão.
visível: Escolha esta opção para forçar a camada a ser visível, independentemente da configuração de visibilidade de qualquer camada pai, quando a página é aberta pela primeira vez em uma janela do navegador.
z-index: Este atributo especifica uma camada ordem de empilhamento em relação a quaisquer outras camadas sobre a página como eles são vistos em um navegador.
Definir o índice z para auto quando o número é não crítico, configurá-lo para herdar para fazer a camada de herdar o valor z-index de uma camada-mãe, ou digite um número positivo ou negativo específico, tal como 1, 15 ou 100, quando o número é importante em relação às outras camadas na página.
Quanto maior for o número, mais perto da camada aparece para a frente ou de cima da página mais próximo do visitante- quanto menor o número, mais perto da camada parece fundo do navegador.
#lastchance {z-index: 4}A figura mostra um exemplo de várias camadas em uma página com diferentes z-index valores.
transbordar: A configuração de excesso pode ser usado para especificar o que acontece com qualquer conteúdo dentro de uma camada que excedem o tamanho da camada, tal como definido no âmbito do CSS. Por exemplo, se uma camada é 200px por 200px em tamanho, mas contém uma página inteira de texto, a configuração de overflow determina como o texto irá preencher a camada. Colocou o transbordar atribuir a auto, escondido, rolagem, ou visível.
#aboutus {overflow: Rolagem}Aqui está uma descrição de cada um dos valores de estouro que você pode usar:
auto: Escolha essa opção para que o navegador adiciona barras de rolagem para a camada se e somente se o conteúdo exceder largura definida da camada e altura automaticamente.
escondido: Quando esta opção for selecionada, o tamanho de uma camada é mantida e qualquer conteúdo que excede este tamanho é cortado ou recortado de vista em uma janela do navegador.
rolagem: Escolha rolagem para adicionar barras de rolagem para a camada, independentemente se o conteúdo se encaixa ou excede largura e altura da camada. Este atributo não é uniformemente suportado por todos os navegadores, então certifique-se de testá-lo antes de publicar.
visível: Escolha essa opção para que a camada de expandir verticalmente e depois na horizontal, se necessário, para atender quaisquer conteúdos que excedem a largura da camada especificada e altura para que todos os conteúdos são visíveis.
Placement (esquerda, topo, certo, inferior): Use o atributo colocação para especificar o tamanho exato ea localização (com base no tipo especificado) de um elemento de estilo em uma janela do navegador.
Por padrão, o tamanho do pixel e colocação de um elemento são especificados para o superior, esquerda, inferior e bordas direita. No entanto, você pode usar outras unidades (incluindo pt, dentro, cm, milímetros, pc, em, ex, ou %) Se desejado ou definir o valor para qualquer um dos lados de auto. Para camadas, se o conteúdo dentro dessa camada exceder o tamanho especificado, a camada se expande para ajustar o conteúdo.
#specialitems {left: 500px; top: 300px; direita: 0-bottom: 0-}grampo: Use este atributo para especificar um menor área retangular visível dentro de uma camada em relação à borda superior esquerda dessa camada. Quando cortada, a área oculta pode ser manipulado com javascript ou outra programação para criar efeitos especiais que podem ocultar e mostrar o conteúdo escondido.
Defina os valores para a área cortada ao topo, esquerda, direita e à margem inferior da camada, usando px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros) cm (centímetros) em (EMS), ex (Exs), ou % (Percentagem), ou um valor de auto.
#bunnygame {clipe: rect (10px, 100px, 0px, 60px) -}