css - pozycja div na dole zawierającego div

118

Jak mogę umieścić element DIV na dole zawierającego go elementu DIV?

<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>

Ten kod umieszcza tekst „wewnątrz” na dole strony.

css position

— nagy.zsolt.hun
źródło

. zewnętrzne potrzebyposition: relative;

— imperatywny

względna, tak, a potem nie wie, jak duża musi być zawartość elementu podrzędnego div, niestety, więc jeśli nie jest to wartość statyczna, z powrotem do pierwotnego pytania. Jak umieścić jeden element div na dole innego elementu div (domniemany: „bez zrywania wszystkiego”).

— JosephK,

Odpowiedzi:

136

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

Musi być

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

Pozycjonowanie bezwzględne szuka najbliższego relatywnie umieszczonego rodzica w DOM, jeśli nie zostanie zdefiniowany, użyje treści.

— Karl
źródło

Dzięki. Czy możesz mi wytłumaczyć dlaczego?

— nagy.zsolt.hun

absolutewyszukuje najbliższego relativerodzica. Domyślnie jest to bodyz document. Więc jeśli nie ma obiektu nadrzędnego DOM ( .outside) ma własność bycia relativetwój .insidepójdzie na dno znacznika body.

„ Pozycjonowanie bezwzględne szuka najbliższego relatywnie pozycjonowanego rodzica w DOM, jeśli ktoś nie jest zdefiniowany, użyje ciała. ” Tak wiele mi wyjaśniłeś ! Teraz naprawdę zaczynam rozumieć CSS. DZIĘKUJĘ CI!

— Simon Forsberg

Absolut faktycznie wyszukuje najbliższego niedomyślnego (= statycznego) przodka, który często jest pozycjonowany względnie. Nie musi też być bezpośrednim rodzicem, ale może to być na przykład dziadek.

— mzwaal

Zależy to od stałych wysokości, co jest BARDZO ZŁE. Prosta zmiana czcionki, rozmiaru czcionki, wypełnienia, marginesów i Bóg wie, co jeszcze wymaga eksperymentów, aby odgadnąć nową wysokość.

— Anderson,

Przypisz position:relativedo .outside, a następnie position:absolute; bottom:0;do swojego .inside.

Tak jak to:

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

— dsgriffin
źródło

to może być podstawą lepkiej stopki, prawda?

— cade galt

Nie mogę użyć pozycji: bezwzględna; dla drugiego div. to jest moje ograniczenie, czy możesz podać mi inne opcje?

— Piyush Dholariya

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

Elementy, które są pozycjonowane względnie, są nadal uważane za znajdujące się w normalnym przepływie elementów w dokumencie. W przeciwieństwie do tego element, który jest ustawiony absolutnie, jest usuwany z przepływu i dzięki temu nie zajmuje miejsca podczas umieszczania innych elementów. Element pozycjonowany absolutnie jest pozycjonowany względem najbliższego przodka. Jeśli pozycjonowany przodek nie istnieje, używany jest kontener początkowy.

„Kontener początkowy” byłby <body>, ale dodanie powyższego powoduje .outsidepozycjonowanie.

— Pigułki wybuchowe
źródło