Mit der schwebenden Positionierungsmethode können die feste Breite und die Anpassung von einer Spalte an mehrere Spalten grundsätzlich problemlos durchgeführt werden, einschließlich der festen Breite von drei Spalten. Hier erhalten wir eine neue Anforderung. Die linke Spalte in der Basis erfordert eine feste Breite und wird auf der rechten Seite angezeigt Die mittlere Spalte muss zwischen der linken und der rechten Spalte liegen. Die Mitte der rechten Spalte passt sich automatisch an die Änderung des Abstands zwischen der linken und der rechten Spalte an. Dies stellt eine neue Anforderung an das Layout dar und kann nicht einfach durch die Verwendung von Float-Attributen und Prozentattributen erreicht werden. CSS unterstützt derzeit keine Prozentberechnungen, die genau genug sind, um den von der linken und rechten Spalte belegten Platz zu berücksichtigen Verwenden Sie 100 % für die mittlere Spalte. Für die Breite wird die Breite des Browserfensters anstelle des mittleren Abstands zwischen der linken und der rechten Spalte verwendet. Daher müssen wir dieses Problem überdenken.
Absolute Positionierung
Bevor Sie mit einem solchen dreispaltigen Layout beginnen, müssen Sie eine neue Positionierungsmethode verstehen – die absolute Positionierung. Die bisherige Floating-Positionierungsmethode ermöglicht es dem Browser hauptsächlich, die Floating-Richtung automatisch an den Inhalt des Objekts anzupassen. Wenn diese Methode jedoch die Positionierungsanforderungen nicht erfüllen kann, ist eine neue Methode erforderlich, um neben der Floating-Positionierung eine andere Methode bereitzustellen Die Positionierungsmethode ist die absolute Positionierung, die mithilfe des Positionsattributs erreicht wird.
Position Wird verwendet, um die Positionierungsmethode von Objekten festzulegen. Verfügbare Werte: statisch/absolut/relativ
Für jedes Objekt auf der Seite ist das Standardpositionsattribut statisch.
Wenn das Objekt auf „position:absolute“ eingestellt ist, wird das Objekt entsprechend der Position der gesamten Seite neu positioniert. Bei Verwendung dieses Attributs können Sie die Abstandswerte „oben“, „rechts“, „unten“ und „links“ verwenden in den vier Richtungen oben, rechts, unten und links. Um die spezifische Position des Objekts zu bestimmen, sehen Sie sich das folgende CSS an:
#layout {
position:absolute;
top :20px;
left:0px;
wenn# Wenn das Layout position:absolute; verwendet, wird es gleichzeitig zu einem absoluten Positionierungsmodus immer 20 Pixel vom oberen Rand des Browserfensters entfernt sein, und left:0px; stellt sicher, dass es 0 Pixel vom linken Rand des Browsers entfernt ist.
Hinweis: Wenn ein Objekt auf „position:absolute“ eingestellt ist, wird es im Wesentlichen nicht von anderen Objekten getrennt und auch nicht durch die schwebende Positionierung anderer Objekte beeinflusst In gewisser Weise schwebt das Objekt nach Verwendung der absoluten Positionierung wie eine Ebene auf der Webseite.
Nachdem das Objekt absolut positioniert ist, wird seine schwebende Beziehung zur Seite nicht mehr berücksichtigt. Sie müssen nur die Werte für die obere, rechte, untere und linke Richtung des Objekts festlegen.
In diesem Fall kann die Verwendung der absoluten Positionierung das von uns angesprochene Problem gut lösen. Verwenden Sie auf ähnliche Weise 3 Divs, um unsere dreispaltige Struktur zu bilden:
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
