css - div'i div içeren öğenin altına konumlandır

118

Bir div'i içeren div'in altına nasıl yerleştirebilirim?

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

Bu kod, "içerideki" metni sayfanın altına yerleştirir.

css position

— nagy.zsolt.hun
kaynak

.dış ihtiyaçlarposition: relative;

— Zorunlu

göreli, evet ve o zaman ne yazık ki child-div içeriğini tutmanın ne kadar büyük olması gerektiğini bilmiyor, bu statik bir değer olmadığı sürece, orijinal soruya geri dönüyor. Bir div'in başka bir div'in altına nasıl yerleştirileceği ("her şeyi bozmadan" ima edilen).

— JosephK

Yanıtlar:

136

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

Olması gerekir

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

Mutlak konumlandırma, DOM içinde nispeten konumlandırılmış en yakın üst öğeyi arar, eğer biri tanımlanmazsa gövdeyi kullanır.

— Karl
kaynak

Teşekkürler. Nedenini açıklayabilir misin?

— nagy.zsolt.hun

absoluteen yakın relativeebeveyni arar . Varsayılan bodyolarak document,. Dolayısıyla, hiçbir üst DOM nesnesi ( .outside) relativesizin olma özelliğine sahip değilse .insidebody etiketinin altına gideceksiniz.

" Mutlak konumlandırma, DOM içinde nispeten konumlandırılmış en yakın ebeveyni arar, eğer biri tanımlanmazsa gövdeyi kullanır. " Benim için çok şey açıkladınız ! Şimdi CSS'yi gerçekten anlamaya başladım. TEŞEKKÜR EDERİM!

— Simon Forsberg

Mutlak gerçekte, genellikle göreli olarak konumlandırılmış en yakın varsayılan olmayan (= statik) konumlandırılmış atayı arar. Aynı zamanda doğrudan bir ebeveyn olmak zorunda değildir, ancak örneğin bir büyükanne veya büyükbaba olabilir.

— mzwaal

Bu, ÇOK KÖTÜ olan sabit yüksekliklere bağlıdır. Basit bir yazı tipi, yazı tipi boyutu, dolgu, kenar boşlukları değişikliği ve tanrı, yeni yüksekliği tahmin etmek için başka neyin deneme gerektirdiğini bilir.

— Anderson

Ata position:relativeiçin .outside, sonra ve position:absolute; bottom:0;Blogunuza .inside.

Şöyle:

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

— dsgriffin
kaynak

bu yapışkan bir altbilginin temeli olabilir, değil mi?

— cade galt

Pozisyonu kullanamıyorum: mutlak; ikinci div için. bu benim kısıtlamam, bana başka seçenekler verebilir misin?

— Piyush Dholariya

Ekle position: relativeiçin .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

Göreceli olarak konumlandırılan öğeler, yine de belgedeki öğelerin normal akışında olduğu kabul edilir. Aksine, mutlak olarak konumlandırılan bir eleman akıştan çıkarılır ve bu nedenle diğer elemanları yerleştirirken yer kaplamaz. Mutlak konumlandırılmış eleman, en yakın konumlandırılmış ataya göre konumlandırılır. Konumlandırılmış bir ata yoksa, ilk konteyner kullanılır.

"İlk kap" olacaktır <body>, ancak yukarıdakilerin eklenmesi .outsidekonumlandırılmış hale getirir .

— Patlama Hapları
kaynak