Absolute Position funktioniert nicht

Ich versuche, ein Div mit ID 'absPos' in absoluter Position in Bezug auf seine Eltern Div setzen. Aber es funktioniert nicht, das Div befindet sich in der oberen linken Ecke der Seite.Absolute Position funktioniert nicht

Mein Codebeispiel ist als

<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>

folgt Können Sie mir helfen, dieses Problem zu lösen. In meinem tatsächlichen Fall anstelle der roten Hintergrundfarbe muss ich ein Hintergrundbild platzieren.

Grüße

Quelle

2010-09-30 Ram

position:relative an die Mutter div Nehmen.

<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>

Quelle

2010-09-30 12:34:48

Sie benötigen relative Position Eltern div erste geben:

<div style="height: 80px; padding-left: 20px; position:relative;">

Quelle

2010-09-30 12:34:52 Sarfraz

Sie müssen die Eltern div erklären, entweder position: relative oder position: absolute selbst.

relative ist, was Sie in diesem Fall suchen.

Quelle

2010-09-30 12:34:53

Wenn Sie ein Element mit absoluter Position platzieren, muss das Basiselement einen anderen Positionswert als den Standardwert haben.

In Ihrem Fall können Sie das Problem beheben, wenn Sie den Positionswert des übergeordneten Div in 'relativ' ändern.

Quelle

2010-09-30 12:36:04

Das nth-Elternelement meines Elements hat eine andere Position als die Standardeinstellung, aber ich muss mein Element absolut oben links im Fenster platzieren, also genau das Gegenteil dieser Frage. Kann es geholfen werden? Warum funktioniert es so? – Qwerty

Sie können auch Apply Position: absolute auf die Parent Div anwenden. Gesamt-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>

Quelle

2010-10-01 06:51:35 Rajasekar

Wenn, wie ich, Sie ein Element über ein anderes Element zu positionieren versuchen, das schwimmende Element muss innerhalb des anderen, nicht als Geschwister sein. Jetzt kann Ihre position:absolute; arbeiten!

Quelle

2015-07-09 16:02:54

Antwort

Verwandte Themen