Absolute position nicht funktioniert

Ich versuche, platzieren Sie ein div mit der id 'absPos' in die absolute position in Bezug zu der Ihr übergeordneten div. Aber es funktioniert nicht, das div-Element platziert in der linken oberen Ecke der Seite.

Mein code-Beispiel ist wie folgt

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>

Können Sie mir helfen, dieses Problem zu lösen.
In meinem konkreten Fall anstelle des roten hintergrund-Farbe, die ich habe, um ein Hintergrundbild.

Hinsichtlich

InformationsquelleAutor Ram | 2010-09-30
  1. 37

    Elemente mit absoluter Positionierung positioniert sind, von Ihren offsetParent, der nächste Vorfahr ist auch positioniert. In Ihrem code, keiner der Vorfahren "positioniert" - Elemente, also das div-Element offset von Körper-element, das ist die offsetParent.

    Die Lösung ist, gelten position:relative zu dem übergeordneten div, die Kräfte, die ihn zu einer positioniertes element und das Kind, das offsetParent.

    <html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px; position: relative;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>
    • Das Problem mit dieser parent-div ' s mit css angewendet wird, um untergeordnete DIVS mit css, wie Deckkraft, etc. schwierig zu Debuggen.
    InformationsquelleAutor Andy E
  2. 6

    Wenn Sie Sie ein element mit absoluter position, müssen Sie das base-element um eine position anderen Wert als den Standardwert.

    In Ihrem Fall, wenn Sie die position ändern Wert des übergeordneten div 'relativ' Sie können das Problem beheben.

    • Mein element ist das N-te Elternteil hat eine andere position als die Standard, aber ich brauche mein element platziert werden absolut auf der oberen linken Seite des Fensters, also genau das Gegenteil von dem, diese Frage. Kann es geholfen werden? Warum funktioniert es so?
    InformationsquelleAutor Arun P Johny
  3. 3

    Müssen Sie erklären das übergeordnete div-entweder position: relative oder position: absolute selbst.

    relative ist, was Sie suchen in diesem Fall.

    InformationsquelleAutor Pekka 웃
  4. 2

    Müssen Sie zu geben, übergeordneten div relative position erste:

    <div style="height: 80px; padding-left: 20px; position:relative;">
    InformationsquelleAutor Sarfraz
  5. 1

    Können Sie auch Anwenden, Position:absolute, um das Parent-Div. Insgesamt Code unten

    <html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px;position:absolute; padding-left: 20px;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>
    InformationsquelleAutor Rajasekar
  6. 0

    Wenn Sie, wie ich, versuchten zu positionieren ein element über ein anderes element, das schwebende element muss innerhalb des anderen, nicht als Geschwister. Jetzt ist Ihre position:absolute; arbeiten können!

    InformationsquelleAutor Mike GB
Schreibe einen Kommentar