Posicione um elemento em relação ao seu contêiner

Estou tentando criar um gráfico de barras horizontal 100% empilhado usando HTML e CSS. Gostaria de criar as barras usando DIVscores de fundo e larguras de porcentagem, dependendo dos valores que quero representar graficamente. Também quero ter linhas de grade para marcar uma posição arbitrária ao longo do gráfico.

Nas minhas experiências, já consegui empilhar as barras horizontalmente, atribuindo a propriedade CSS float: left. No entanto, eu gostaria de evitar isso, pois realmente parece mexer com o layout de maneiras confusas. Além disso, as linhas de grade não parecem funcionar muito bem quando as barras são flutuadas.

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

1. Entre navegadores (idealmente sem muitos hacks)
2. Executa no modo Quirks
3. O mais limpo / limpo possível, para facilitar personalizações
4. Feito sem JavaScript, se possível.

Você está certo de que o posicionamento CSS é o caminho a percorrer. Aqui está uma rápida descrição:

position: relativefará o layout de um elemento em relação a si mesmo. Em outras palavras, os elementos são dispostos no fluxo normal, depois são removidos do fluxo normal e compensados ​​pelos valores que você especificou (superior, direito, inferior, esquerdo). É importante observar que, por ser removido do fluxo, outros elementos ao seu redor não serão alterados com ele (use margens negativas, se você quiser esse comportamento).

No entanto, é provável que você esteja interessado em position: absoluteposicionar um elemento em relação a um contêiner. Por padrão, o contêiner é a janela do navegador, mas se um elemento pai o tiver position: relativeou position: absoluteestiver definido, ele atuará como o pai para posicionar as coordenadas de seus filhos.

Para demonstrar:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

Nesse exemplo, o canto superior esquerdo de #box100px para baixo e 50px à esquerda do canto superior esquerdo de #container. Se #containernão tiver position: relativedefinido, as coordenadas de #boxserão relativas ao canto superior esquerdo da porta de visualização do navegador.

Você deve definir explicitamente a posição do contêiner pai, juntamente com a posição do contêiner filho. A maneira típica de fazer isso é algo como isto:

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

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

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

A seguir estão os valores para a propriedade position.

• estático
• fixo
• relativo
• absoluto

posição: estático

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

#myelem {
    position : static;
}

posição: fixo

Isso definirá a posição de um elemento em relação à janela do navegador (janela 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

Para 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 queremos 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 em uma posição 30px a partir do topo e 300px a partir da esquerda na página e rolará com a página.

E finalmente...

posição relativa + absoluta

Podemos definir a propriedade position de um elemento pai como relativa e, em seguida, definir a propriedade position do elemento filho como absoluta . Dessa forma, podemos posicionar o filho 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 o elemento # div-2 está posicionado no canto superior direito dentro do elemento #container .

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

Espero que este tutorial ajude.

O posicionamento absoluto posiciona um elemento em relação ao seu ancestral posicionado mais próximo. Então, coloque position: relativeo contêiner, depois os elementos filho, tope leftserá relativo à parte superior esquerda do contêiner, desde que os elementos filhos tenham position: absolute. Mais informações estão disponíveis na especificação CSS 2.1 .

Se você precisar posicionar um elemento em relação ao elemento que contém primeiro, será necessário adicionar position: relative ao elemento do contêiner . O elemento filho que você deseja posicionar em relação 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 haja um pai relativamente posicionado, o elemento será posicionado em relação ao elemento raiz (diretamente ao elemento HTML).

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

.parent {
  position: relative;
} 

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

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