usar Posicionar um elemento HTML relativo ao seu contêiner usando CSS




usar position css (4)

Eu estou tentando criar um gráfico de barras horizontais 100% empilhadas usando HTML e CSS. Eu gostaria de criar as barras usando DIVs com cores de fundo e larguras percentuais dependendo dos valores que eu quero representar graficamente. Eu também quero ter linhas de grade para marcar uma posição arbitrária ao longo do gráfico.

Na minha experiência, eu já peguei as barras para empilhar horizontalmente, atribuindo a propriedade CSS float: left . No entanto, eu gostaria de evitar isso, já que isso realmente parece confundir o layout de maneira confusa. Além disso, as linhas de grade não parecem funcionar muito bem quando as barras estão flutuando.

Eu acho que o posicionamento CSS deve ser capaz de lidar com isso, mas ainda não sei como fazer isso. Eu quero ser capaz de especificar a posição de vários elementos em relação ao canto superior esquerdo do seu contêiner. Eu me deparo com esse tipo de problema regularmente (mesmo fora deste projeto gráfico específico), então eu gostaria de um método que é:

  1. Cross-browser (idealmente sem muitos hacks de navegador)
  2. Executa no modo Quirks
  3. Tão claro / limpo quanto possível, para facilitar as personalizações
  4. Feito sem JavaScript, se possível.

O posicionamento absoluto posiciona um elemento em relação ao seu ancestral posicionado mais próximo. Portanto, coloque position: relative no contêiner, em seguida, para elementos filho, top e left serão relativos ao canto superior esquerdo do contêiner, desde que os elementos filho tenham position: absolute . Mais informações estão disponíveis na especificação CSS 2.1 .


Se você precisar posicionar um elemento relativo ao seu elemento contendo primeiro, precisará adicionar position: relative ao elemento container . O elemento filho que você deseja posicionar relativamente ao pai deve ter position: absolute . A maneira como o posicionamento absoluto funciona é que ele é feito em relação ao primeiro elemento pai relativamente (ou absolutamente) posicionado . Caso não exista um pai relativamente posicionado, o elemento será posicionado em relação ao elemento raiz (diretamente ao elemento HTML).

Portanto, se você quiser posicionar seu elemento filho no canto superior esquerdo do contêiner pai, faça isso:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Você se beneficiará muito com a leitura deste artigo . Espero que isto ajude!


Eu sei que estou atrasado, mas espero que isso ajude.

A seguir estão os valores para a propriedade de posição.

  • estático
  • fixo
  • relativo
  • absoluto

posição: estática

Este é o padrão. Isso significa que o elemento ocorrerá em uma posição que normalmente seria.

#myelem {
    position : static;
}

posição: fixo

Isso definirá a posição de um elemento em relação à janela do navegador (porta de visualização). Um elemento posicionado fixo permanecerá em sua posição mesmo quando a página rolar.

(Ideal se você quiser o botão de rolagem para cima no canto inferior direito da página).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

posição: relativa

Colocar um elemento em um novo local em relação à sua posição original.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

O CSS acima moverá o elemento #myelem 30px para a esquerda e 30px a partir do topo de sua localização real.

posição: absoluto

Se quisermos que um elemento seja colocado em uma posição exata na página.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

O CSS acima posicionará o elemento #myelem na posição 30px da parte superior e 300px da esquerda na página e rolará com a página.

E finalmente...

posição relativa + absoluta

Podemos definir a propriedade de posição de um elemento pai como relativo e, em seguida, definir a propriedade position do elemento filho como absolute . Desta forma, podemos posicionar a criança em relação ao pai em uma posição absoluta.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Podemos ver na imagem acima que o elemento # div-2 está posicionado no canto superior direito dentro do elemento #container .

GitHub: Você pode encontrar o HTML da imagem acima here e CSS here .

Espero que este tutorial ajude.


Você precisa definir explicitamente a posição do contêiner pai junto com a posição do contêiner filho. A maneira típica de fazer isso é algo assim:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}




positioning