Posição absoluta, alguém pode explicar isso

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

Pergunta

Aqui está um trecho de CSS que explicou I necessidade: 

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

Ok por isso é o posicionamento absoluto de uma imagem, obviamente.

  1. topo é como preenchimento a partir do topo, certo?
  2. O que deixou 50% fazer?
  3. porque é a margem esquerda na -445px?

Update: largura é 860px. A imagem real é 100x100 se isso faz a diferença ??

Foi útil?

Solução

  1. Top é a distância a partir do topo do elemento de HTML ou, se este for no interior de outro elemento com posição absoluta, a partir do topo do que.

  2. & 3. Depende da largura da imagem, mas pode ser para centrar a imagem horizontalmente (se a largura da imagem é 890px). Há outras maneiras para o centro uma imagem na horizontal embora. Mais comumente, este é usado para centralizar um bloco de altura conhecida verticalmente (esta é a maneira mais fácil para o centro algo de altura conhecida verticalmente): 

    top: 50%
margin-top: -(height/2)px;

Outras dicas

Esta provavelmente foi feito a fim de centrar o elemento na página (usando a "ponto morto" técnica).

Ele funciona assim: Supondo que o elemento é 890px de largura, ele é definido como position:absolute e left:50%, que coloca sua borda mão esquerda na Centro do navegador ( bem, poderia ser o centro de algum outro elemento com position:relative).

Em seguida, a margem negativo é utilizado para mover o bordo do lado esquerdo para a esquerda, a uma distância igual a metade do elemento é largura , centrando, portanto,.

é claro, isso pode não ser centralizando-a exatamente (que depende o quão grande o elemento realmente é, não há width no código que você colou, por isso é impossível ter a certeza), mas é certamente colocar o elemento em relação ao centro da página

topo é como preenchimento a partir do canto superior direito?

Sim, a parte superior da página.

O que deixou 50% fazer?

Ela se move o conteúdo para o centro da tela (100% seria todo o caminho para a direita.)

porque é a margem esquerda na -445px?

Depois de se mudar com ele. "Esquerda: 50%", Isso move it 445 pixels para a esquerda

O fragmento acima refere-se a um elemento (poderia ser uma div, extensão, imagem ou de outro modo) com uma ID de secção.

O elemento tem uma imagem de fundo de blah.png que irá repetir em X e Y direções.

A extremidade superior do elemento vai ser posicionado 0px (ou quaisquer outras unidades) a partir do topo do mesmo do elemento pai se o progenitor, também é absolutamente posicionado. Se o pai é a janela, será na borda superior da janela do navegador.

O elemento terá a sua borda esquerda posicionada 50% a partir da esquerda da borda esquerda do que do elemento pai.

O elemento será, então, "movido" 445px esquerda a partir desse ponto de 50%.

Você vai descobrir cada coisa que você precisa saber, lendo-se na CSS modelo de caixa

Quando a posição absoluta é, de cima é a distância vertical entre o pai (provavelmente o tag do corpo, de modo que 0 representa a borda superior da janela de navegador). Esquerda 50% é a distância a partir do bordo esquerdo. Os movimentos margem negativa de volta esquerda 445px. Quanto ao porquê, o seu palpite é tão bom quanto o meu.

Correndo o risco de soar como Capitão Óbvio, eu vou tentar explicá-lo tão simples quanto possível.

Top é um número que determina o número de pixels que você quer que ele seja a partir do topo de qualquer elemento html está acima dela ... então não necessariamente o topo de sua página. Seja cauteloso com o seu html formatação como você projetar seu css.

A sua esquerda para 50% deve movê-lo para o centro da tela, dado que é 50. Tenha em mente as pessoas têm diferentes tamanhos de tela e é atribuído ao (0,0) superior esquerdo da sua imagem, e não o centro da imagem, por isso não vai ser perfeitamente alocado para o centro de sua tela como você pode esperar que ele.

Por isso, a margem esquerda para -445 pixels é used-- para movê-lo ainda mais, fixo.

Boa sorte, espero que isso fazia sentido. Eu estava tentando palavra minha explicação diferente no caso de outras respostas ainda estavam dando-lhe um tempo difícil. Eles eram grandes respostas também.

(Se você tiver dois monitores de tamanhos diferentes, sugiro brincando ao redor do com o código para ver como cada modificação afeta telas de tamanhos diferentes!)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top