Positionieren eines DIV vor dem vorherigen DIV

Wenn Sie meinen, Sie möchten, dass die Seitenleiste ganz oben auf der Seite sitzt, beginnend über und rechts von der Navigationsleiste, wie hier...

...es gibt zwei einfache Wege und einen schwierigeren Weg, der auch andere Vorteile bietet.

1.position: absolute;

Hier ist der sauberste einfache Weg:

• Fügen Sie top: 0;, position: absolute;zu dem Element hinzu, das oben auf der Seite stehen muss (#beta), und ersetzen Sie es float: right;durch right: 0;( float: right;funktioniert nicht mit , erzeugt position: absolute;aber right: 0;in diesem Zusammenhang denselben Effekt)
• Haben Sie position: relative;ein Element, das die gesamte Seite enthält (auf Ihrer Website, das ist #container-inner) und keine Elemente dazwischen (also müssen Sie es aus entfernen #pagebody- probiert und es macht nichts kaputt).

Die top: 0;eines position: absolute;Elements basiert auf dem nächsten übergeordneten Element mit position: relative;.

2.margin-top: -XXXpx;

Wenn Sie aus irgendeinem Grund position: relative;das div in der Mitte benötigen (ich kann keinen Grund erkennen, aber einer könnte auftauchen), gibt es eine andere, weniger saubere Alternative.

Die Höhe des Navigations-/Kopfzeilenabschnitts ist festgelegt, sodass Sie wissen, um wie viele Pixel Sie die Seitenleiste nach oben verschieben möchten. Sie können der Seitenleiste ( ) also einfach #betaeinen negativen oberen Rand von so vielen Pixeln (wie margin-top: -350px;) geben. Das einzige Problem bei diesem Plan ist, dass Sie diesen oberen Rand anpassen müssen, wenn Sie die Höhe der Kopfzeile ändern.

3. Content-First-Layout

Schließlich wäre die beste (aber am wenigsten einfache) Lösung, die HTML-Vorlage zu bearbeiten und das #nav-Element in der HTML-Datei nach unten zu verschieben, sodass es sich unter dem Seiteninhalt wie der #beta-Seitenleiste befindet, und dann einen großen Rand oben auf Alpha zu setzen. Erstellen Sie eine Lücke in der Größe Ihrer Überschrift #nav-Abschnitt, erstellen Sie dann sowohl das #nav-Element als auch die #beta-Seitenleiste position: absolute;und top: 0;(überprüfen Sie position: relative;s wie oben) und stellen Sie sicher, dass #nav genau die richtige Größe hat, um das Loch zu füllen.

Es ist im Allgemeinen besser, wenn möglich Nicht-Inhaltselemente unterhalb des Hauptinhalts im HTML-Code zu haben – das bedeutet, dass Menschen mit Screenreadern den interessanten Inhalt, für den sie gekommen sind, vor der Liste der Links hören, die als nächstes gehen, und einige Suchmaschinen geben mehr Gewicht zu Begriffen früher im Markup (ich bin mir ziemlich sicher, dass dies immer noch wahr ist).

Für mehr Lesestoff finden Sie hier einen einfachen Artikel über Content-First-Layouts , und hier ist ein Beispiel im Zusammenhang mit „responsiven“ Designs, die für Mobilgeräte und Desktops funktionieren .

Die absolute Positionierung erledigt das für Sie.
Versuchen Sie, bei Webmasters SE nach gründlicherer Unterstützung zu fragen.

Sie könnten etwas CSS implementieren (basierend auf Ihrem Code) - Ich bin mir nicht 100% sicher, was Sie erreichen wollen (es ist spät hier, also gebe ich der Uhr die Schuld :)) - Ich bin weder mit Typepad vertraut, aber im Allgemeinen -

Vielleicht bringt dich das auf die richtige Spur:

#pagebody-inner {
    display:block;
    width:100%; /* or the size you need it to be in relation to nav */
}
/* This will float your div-elements inside pagebody-inner to the right hand side */
#pagebody-inner div {
    display:block;
    float:right;
}

Diese CSS-Zeilen müssen natürlich in die CSS-Datei für Ihre Site eingefügt werden.

Ich habe den Code auf diese Seite gestellt, wenn Sie damit herumspielen möchten - ändern Sie ihn nach Belieben:
http://jsfiddle.net/SE4Pr/

Sie könnten eine absolute Positionierung verwenden (aber denken Sie daran, das übergeordnete pagebody-innerObjekt relativ zu positionieren, es sei denn, Sie ignorieren den Fluss der Elemente absolut).

Alternativ könnten Sie sowohl alphaals betaauch nach rechts schweben. Oder Sie können einfach die Position von alphaund tauschen betaund nach links schweben oder sie zu Inline-Blöcken machen.

Ich habe mir gerade Ihre Website angesehen und Sie müssen ein paar Änderungen vornehmen.

#alpha{
 float:right;
}
#beta{
 float:left;
}

und das Hinzufügen des korrekten Rands zum div kann es gut aussehen lassen.