HTML: div unter div

Question

Alle Antworten helfen mir nicht.

Sehen Sie hier: https://jsfiddle.net/prg5hc9m/1/

#main { 
    width: 300px; 
    height: 400px; 
    position: relative; 
} 
#main1 { 
    position: absolute; 
    float:left; 
} 
#main2 { 
    position: absolute; 
    overflow-y: scroll; 
    height: inherit; 
    float:left; 
    width: 50%; 
} 

I main2 unter main1 sein wollen.

Answer 1

Nicht sehr klar, was Sie brauchen, aber Sie können nicht absolut mit Float verwenden. Wenn Sie die absoluten Werte entfernen, wird der Bildlaufbereich unter dem anderen angezeigt.

aktualisiert Geige: https://jsfiddle.net/prg5hc9m/3/

#main { 
    top: 20px; 
    left: 20px; 
    width: 300px; 
    height: 400px; 
    position: relative; 
    display:block; 
} 

#main1 { 
    float:left; 
} 

#main2 { 
    clear:left; 
    overflow-y: scroll; 
    height: 300px; 
    float:left; 
    //top: 10%; 
    width: 50%; 
} 

Answer 2

Mit "unter" nehme ich an, du meinst "hinten". Um dies zu tun, müssen Sie eine z-index hinzufügen. Z-Indizes bei Null beginnen, so einfach geben Sie Ihre #main1 div es eine z-index von 1 haben ‚auf‘ erscheinen:

#main1 { 
    z-index: 1; 
} 

ich eine aktualisierte Geige here erstellt haben.

Hoffe, das hilft! :)

Answer 3

Verwenden inline-block.

#main { 
    top: 20px; 
    left: 20px; 
    width: 300px; 
    height: 400px; 
    position: relative; 
    display:block; 

}

#main1 { 
    display: inline-block; 
    float:left; 
    height: 50px; 
} 

#main2 { 
    clear:left; 
    display: inline-block; 
    overflow-y: scroll; 
    height: 300px; 
    float:left; 
    //top: 10%; 
    width: 50%; 
}