css - positioniere div am unteren Rand des enthaltenen div

118

Wie kann ich ein Div am unteren Rand des enthaltenen 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" am Ende der Seite ein.

css position nagy.zsolt.hun
quelle

.außenbedürfnisseposition: relative;

Imperativ

relativ, ja, und dann weiß es leider nicht, wie groß es sein muss, um den untergeordneten div-Inhalt zu halten, es sei denn, dies ist ein statischer Wert, zurück zur ursprünglichen Frage. Wie man ein Div am Ende eines anderen Div platziert (impliziert: "ohne alles zu zerbrechen").

JosephK

Antworten:

136

.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 innerhalb des DOM gesucht. Wenn eines nicht definiert ist, wird der Körper verwendet.

Karl
quelle

Vielen Dank. Kannst du erklären warum?

Nagy.zsolt.hun

absolutesucht nach dem nächsten relativeElternteil. Standardmäßig ist es das bodyder document. Wenn also kein übergeordnetes DOM-Objekt ( .outside) die Eigenschaft hat, relativeIhr zu .insidesein, gehen Sie zum Ende des Body-Tags.

"Die absolute Positionierung sucht nach dem nächstgelegenen relativ positionierten Elternteil innerhalb des DOM. Wenn eines nicht definiert ist, wird der Körper verwendet. " Sie haben mir gerade so viel erklärt ! Jetzt fange ich wirklich an, CSS zu verstehen. DANKE!

Simon Forsberg

Absolute sucht tatsächlich nach dem nächsten nicht standardmäßigen (= statisch) positionierten Vorfahren, der häufig relativ positioniert ist. Es muss auch kein direkter Elternteil sein, sondern kann zum Beispiel ein Großelternteil sein.

Mzwaal

Dies hängt von konstanten Höhen ab, was SEHR SCHLECHT ist. Eine einfache Änderung von Schriftart, Schriftgröße, Polsterung, Rändern und Gott weiß, was sonst noch Experimente erfordert, um die neue Höhe zu erraten.

Anderson

Zuweisen position:relativezu .outsideund dann position:absolute; bottom:0;zu Ihrem .inside.

Wie so:

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

dsgriffin
quelle

Dies könnte die Grundlage für eine klebrige Fußzeile sein, nicht wahr?

Cade Galt

Ich kann Position nicht verwenden: absolut; für die zweite div. Das ist meine Einschränkung. Können Sie mir andere Optionen geben?

Piyush Dholariya

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

Elemente, die relativ positioniert sind, werden weiterhin als im normalen Elementfluss im Dokument befindlich betrachtet. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus dem Fluss genommen und nimmt daher beim Platzieren anderer Elemente keinen Platz ein. Das absolut positionierte Element wird relativ zum nächsten positionierten Vorfahren positioniert. Wenn kein positionierter Vorfahr vorhanden ist, wird der ursprüngliche Container verwendet.

Der "anfängliche Container" wäre <body>, aber das Hinzufügen der oben genannten Marken .outsidepositioniert.

Explosionspillen
quelle