Propriedades de posicionamento de folhas de estilo em cascata (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 absolutamente 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 colocação 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 dentro do fluxo de texto.
largura: Usar 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: Usar este atributo para definir a altura de um elemento, tal como uma camada, através da utilização 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 completamente ignorada 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 de visibilidade para 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.
Video: Propriedade transition CSS3
herdar: Esta opção faz com que qualquer camada de 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-índice: 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 de índice z de uma camada-mãe, ou introduzir 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 o número, mais próximo da camada aparece à frente ou em cima da página mais próxima do visitante- quanto menor o número, mais próximo da camada parece fundo do navegador.
#lastchance {índice z: 4-}A figura mostra um exemplo de várias camadas em uma página com diferente z-índice valores.
transbordar: A configuração estouro pode ser usado para especificar o que acontece com qualquer conteúdo dentro de uma camada que exceder o tamanho da camada conforme definido dentro do CSS. Por exemplo, se uma camada é 200px por 200px em tamanho, mas contém uma página inteira de texto, a definição de excesso determina como o texto irá preencher a camada. Colocou o transbordar atribuir a auto, escondido, rolagem, ou visível.
#aboutus {overflow: scroll-}Aqui está uma descrição de cada um dos valores de estouro que você pode usar:
auto: Escolha esta opção para que o navegador adicionar 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 é seleccionada, o tamanho de uma camada é mantida e qualquer conteúdo superior que tamanho é cortado ou recortado de vista numa janela de navegador.
rolagem: Escolha rolagem para adicionar barras de rolagem para a camada, independentemente do 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 esta opção para que a camada de expandir verticalmente e horizontalmente, em seguida, se necessário, para se adaptar a qualquer conteúdo que excedem a largura da camada especificada e altura de modo 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 para 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 uma 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.
os valores definidos para a área cortada ao topo, à esquerda, à direita e à extremidade inferior da camada de utilização 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) -}