it-swarm.com.de

css - Position div nach unten von enthaltendem div

Wie kann ich ein Div am unteren Rand des enthaltenden Div positionieren?

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

Dieser Code fügt den Text "innen" an den unteren Rand der Seite.

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

Muss sein

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

Bei der absoluten Positionierung wird nach dem nächstgelegenen relativ positionierten übergeordneten Element im DOM gesucht. Wenn eines nicht definiert ist, wird der Hauptteil verwendet.

130
Karl

Weisen Sie position:relative.outside Und dann position:absolute; bottom:0; Ihrem .inside Zu.

Wie so:

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

Hinzufügen position: relative bis .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

Relativ positionierte Elemente werden weiterhin als im normalen Elementfluss des Dokuments befindlich betrachtet. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus dem Fluss genommen und nimmt somit keinen Platz ein, wenn andere Elemente platziert werden. Das absolut positionierte Element wird relativ zum nächsten positionierten Vorfahren positioniert. Wenn es keinen positionierten Vorfahren gibt, wird der ursprüngliche Container verwendet.

Der "anfängliche Container" wäre <body>, aber das Hinzufügen der oben macht .outside positioniert.

20
Explosion Pills