css - posição div na parte inferior da div que contém

118

Como posso posicionar uma div na parte inferior da div que o contém?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

Este código coloca o texto "dentro" na parte inferior da página.

css position

— nagy.zsolt.hun
fonte

.necessidades externasposition: relative;

— Imperativo

relativo, sim, e então ele não sabe quão grande precisa ser para conter o conteúdo div-filho, infelizmente, então, a menos que seja um valor estático, de volta à pergunta original. Como colocar um div na parte inferior de outro div (implícito: "sem quebrar tudo").

— JosephK de

Respostas:

136

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Precisa ser

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

O posicionamento absoluto procura o pai relativamente posicionado mais próximo dentro do DOM; se não houver um definido, ele usará o corpo.

— Karl
fonte

Obrigado. Você pode explicar por quê?

— nagy.zsolt.hun

absoluteprocura o relativepai mais próximo . Por padrão, é o bodydo document. Portanto, se nenhum objeto DOM pai ( .outside) tiver a propriedade de ser relativeseu, .insideele irá para a parte inferior da tag do corpo.

" Absolute posicionando olhares para o mais próximo dos pais relativamente posicionado dentro do DOM, se não for definido ele irá usar o corpo. " Você acabou de explicar de modo muito para mim! Agora eu realmente começo a entender CSS. OBRIGADO!

— Simon Forsberg

Na verdade, o Absolute procura o ancestral posicionado não padrão (= estático) mais próximo, que geralmente está relativamente posicionado. Ele também não precisa ser um pai direto, mas pode, por exemplo, ser um avô.

— mzwaal

Isso depende de alturas constantes, o que é MUITO RUIM. Uma simples mudança de fonte, tamanho da fonte, preenchimento, margens e sabe Deus o que mais exige experimentação para adivinhar a nova altura.

— Anderson

Atribua position:relativea .outsidee depois position:absolute; bottom:0;ao seu .inside.

Igual a:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

— dsgriffin
fonte

esta poderia ser a base para um rodapé pegajoso, não é?

— cade galt

Não posso usar a posição: absoluta; para o segundo div. essa é a minha restrição, você pode me dar outras opções?

— Piyush Dholariya de

Adicionar position: relativea .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

Os elementos posicionados relativamente ainda são considerados como estando no fluxo normal de elementos no documento. Em contraste, um elemento que está posicionado absolutamente é retirado do fluxo e, portanto, não ocupa espaço ao colocar outros elementos. O elemento posicionado absolutamente é posicionado em relação ao ancestral posicionado mais próximo. Se um ancestral posicionado não existe, o recipiente inicial é usado.

O "recipiente inicial" seria <body>, mas adicionar o acima faz com que seja .outsideposicionado.

— Pílulas Explosivas
fonte