Absolute Positionierung mit CSS

  • Hallo zusammen,

    ich habe auf ALLES BANANE einen Stern platziert. Er soll einen Teil des wordpress blogs überdecken und zum Teil über die rechte Seite hinausragen (also über den schwarzen Hintergrund)

    #button {
    background: url('images/button.png') no-repeat top left;
    position: absolute;
    top: 100px;
    left: 1025px;
    width: 200px;
    height: 200px;
    z-index: 3;
    }

    Wird auf meinem macbook im firefox 3.0 und safari richtig angezeigt, jedoch auf anderen PC oder Browsern ist der Stern zu weit rechts und ganz über dem Hintergrund. auch wenn ich das browserfenster größer mache und horizontal scrolle bleibt der stern auf seiner position, der rest bewegt sich.

    danke für einen hinweis
    guido

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Mir scheint, du hast position:absolute nicht verstanden. Absolute Positionierung relativ zum übergeordneten Element - hier: body, d.h. das Browserfenster. In deinem Fall immer 100px vom oberen, und 1025px vom linken Rand der Seite im Browserfenster. Änderungen an der Fenstergröße etc. interessieren position:absolute nicht.

    Wenn sich der Button in #outer befindet, dann dürftest du eher zum Ziel kommen (mit kleienren Werten für left, relativ zum linken Rand von #outer), da #outer bei dir ebenfalls positioniert ist.

  • Hallo marX,

    danke für Dein Feedback. Ich habe nun ff. versucht.

    #button {
    background: url('images/button.png') no-repeat top left;
    position: relative;
    top: 100px;
    left: 700px;
    width: 200px;
    height: 200px;
    z-index: 3;
    }

    wie genau muss ich in der header.php <div id="button"> einbinden. habe verschiedene versionen versucht, mein layout wird meist zerhackt oder ein abstand nach oben erzeugt.

    <div id="outer">
    <div id="upbg"></div>
    <div id="inner">
    <div id="header">

    danke für einen hinweis

  • Naja, position:absolute muss schon bleiben. Nur bei position:absolute wird das Element aus dem normalen Elementfluss herausgenommen und lässt keine Lücke an der eigentlichen Position. Bei position:absolute beziehen sich die Koordinaten aber jeweils relativ zum Ursprung des nächsthöheren positionierten Elements (in dem Fall #outer). Gibt es kein übergeordnetes positioniertes Element, dann gelten die Koordinaten relativ zum Ursprung des HTML-Dokuments.

    Absolute/relative Positionierung in CSS ist nicht ganz ohne. Absolut ist meistens auch nur relativ. ;-)

  • hi du,

    ich glaub es ist korrekt. Zumindest schaut's danach aus:

    #button {
    background: url('images/button.png') no-repeat;
    position: absolute;
    top: 100px;
    left: 700px;
    width: 200px;
    height: 200px;
    z-index: 3;
    }

    in der header.php:

    <div id="outer">
    [COLOR=Red] <div id="button"></div>[/COLOR]
    <div id="upbg"></div>
    <div id="inner">
    <div id="header">

    korrekt?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!