css - posisi div ke bawah div berisi

118

Bagaimana saya bisa memposisikan div ke bagian bawah div yang berisi?

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

Kode ini menempatkan teks "di dalam" ke bagian bawah halaman.

css position

— nagy.zsolt.hun
sumber

. kebutuhan luarposition: relative;

— Imperatif

relative, yes, dan kemudian ia tidak tahu seberapa besar yang dibutuhkan untuk menampung konten div turunan, sayangnya, jadi kecuali itu adalah nilai statis, kembali ke pertanyaan awal. Bagaimana menempatkan satu div di bagian bawah div lain (tersirat: "tanpa merusak segalanya").

— JosephK

Jawaban:

136

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

Perlu

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

Pemosisian absolut mencari induk yang relatif diposisikan paling dekat dalam DOM, jika tidak ditentukan, ia akan menggunakan body.

— Karl
sumber

Terima kasih. Bisakah Anda menjelaskan mengapa?

— nagy.zsolt.hun

absolutemencari orang relativetua terdekat . Secara default, ini adalah bodydari document. Jadi jika tidak ada objek DOM induk ( .outside) yang memiliki properti menjadi, relativeAnda .insideakan pergi ke bagian bawah tag body.

" Penentuan posisi absolut mencari induk yang relatif diposisikan paling dekat dalam DOM, jika tidak ditentukan, ia akan menggunakan body. " Anda baru saja menjelaskan begitu banyak untuk saya! Sekarang saya benar-benar mulai memahami CSS. TERIMA KASIH!

— Simon Forsberg

Absolute sebenarnya mencari leluhur terdekat yang diposisikan bukan default (= statis), yang seringkali diposisikan secara relatif. Ia juga tidak harus orang tua langsung tetapi bisa misalnya menjadi kakek-nenek.

— mzwaal

Ini tergantung pada ketinggian yang konstan, yang SANGAT BURUK. Perubahan sederhana font, ukuran font, padding, margin, dan entah apa lagi yang menuntut eksperimen untuk menebak ketinggian baru.

— Anderson

Tetapkan position:relativeke .outside, lalu position:absolute; bottom:0;ke .inside.

Seperti:

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

— dsgriffin.dll
sumber

Ini bisa menjadi dasar untuk footer yang lengket bukan?

— cade galt

Saya tidak bisa menggunakan posisi: mutlak; untuk div kedua. Itulah batasan saya, dapatkah Anda memberi saya pilihan lain?

— Piyush Dholariya

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

Elemen yang diposisikan secara relatif masih dianggap berada dalam aliran normal elemen dalam dokumen. Sebaliknya, elemen yang diposisikan secara absolut dikeluarkan dari aliran dan dengan demikian tidak memakan ruang saat menempatkan elemen lain. Elemen yang diposisikan secara absolut diposisikan relatif terhadap leluhur yang diposisikan terdekat. Jika leluhur yang diposisikan tidak ada, penampung awal akan digunakan.

"Penampung awal" akan menjadi <body>, tetapi menambahkan di atas membuat .outsidediposisikan.

— Pil Ledakan
sumber