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
6
. 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
37
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.
6
„ 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
1
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,
73

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
1
Nie mogę użyć pozycji: bezwzględna; dla drugiego div. to jest moje ograniczenie, czy możesz podać mi inne opcje?
Piyush Dholariya
20

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