Die Eigenschaft „bottom“ in CSS wird verwendet, um die Position der unteren Kante eines Elements relativ zu seinem übergeordneten Element festzulegen. Durch Anpassen des Werts des unteren Attributs können Sie die vertikale Position des Elements ändern. Im Folgenden werden die Rolle und Verwendung des unteren Attributs ausführlich vorgestellt und einige Codebeispiele zur Veranschaulichung bereitgestellt.
Pixelwerte verwenden
Sie können Pixelwerte verwenden, um den Abstand eines Elements vom unteren Rand seines übergeordneten Elements anzugeben. Der folgende Code positioniert beispielsweise ein Element 100 Pixel vom unteren Rand seines übergeordneten Elements entfernt:
.element {
position: absolute;
bottom: 100px;
}Prozentwerte verwenden
Zusätzlich zur Verwendung von Pixelwerten können Sie auch Prozentwerte verwenden, um den Abstand eines festzulegen Element vom unteren Rand seines übergeordneten Elements. Prozentwerte werden relativ zur Höhe des übergeordneten Elements berechnet. Der folgende Code legt beispielsweise den Abstand des Elements vom unteren Rand des übergeordneten Elements auf 50 % der Höhe des übergeordneten Elements fest:
.element {
position: absolute;
bottom: 50%;
}inherit bedeutet, dass das Element den unteren Attributwert des übergeordneten Elements erbt. Der folgende Code legt beispielsweise den unteren Attributwert des Elements so fest, dass er den unteren Attributwert des übergeordneten Elements erbt:
.parent {
position: relative;
bottom: 100px;
}
.child {
position: absolute;
bottom: inherit;
}Codebeispiel
Hier ist ein vollständiges Codebeispiel, das zeigt, wie das untere Attribut verwendet wird, um den unteren Rand zu positionieren ein Element:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: gray;
}
.element {
position: absolute;
bottom: 20px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="element"></div>
</div>
</body>
</html>Im obigen Beispiel wird ein Containerelement erstellt und auf relative Positionierung eingestellt. Erstellen Sie dann ein Element innerhalb des Containers und positionieren Sie das Element mithilfe der absoluten Positionierung 20 Pixel vom unteren Rand des Containers entfernt, indem Sie die Eigenschaft „bottom“ auf „20px“ festlegen.
Durch die Lektüre dieses Artikels verstehen wir die Rolle und Verwendung des unteren Attributs in CSS und stellen einige Codebeispiele zur Veranschaulichung bereit. Durch die Verwendung des unteren Attributs können wir die Position des Elements in vertikaler Richtung flexibel anpassen und so das Seitenlayout freier gestalten.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das untere Attribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
