La position absolue ne fonctionne pas

J'essaie de placer une div avec l'id 'absPos' en position absolue par rapport à sa div parente. Mais ça ne marche pas, la div est placée en haut à gauche de la page.La position absolue ne fonctionne pas

Mon exemple de code est le suivant

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

Pouvez-vous me aider à résoudre ce problème. Dans mon cas, au lieu de la couleur de fond rouge, je dois placer une image de fond.

Cordialement

Source

2010-09-30 Ram

Appliquer position:relative à la div parent.

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

Source

2010-09-30 12:34:48

Vous devez donner div parent relative première position:

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

Source

2010-09-30 12:34:52 Sarfraz

Vous devez déclarer la div parent soit position: relative ou position: absolute lui-même.

relative est ce que vous cherchez dans ce cas.

Source

2010-09-30 12:34:53

Si vous placez un élément avec une position absolue, vous avez besoin que l'élément de base ait une valeur de position différente de la valeur par défaut.

Dans votre cas, si vous modifiez la valeur de position de la div parente à 'relative', vous pouvez résoudre le problème.

Source

2010-09-30 12:36:04

Le nième parent de mon élément a une position autre que celle par défaut, mais j'ai besoin que mon élément soit placé absolument en haut à gauche de la fenêtre, donc exactement le contraire de cette question. Peut-il être aidé? Pourquoi ça marche comme ça? – Qwerty

Vous pouvez également appliquer Position: absolue à la division parente. Code du total ci-dessous

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

Source

2010-10-01 06:51:35 Rajasekar

Si, comme moi, vous essayez de placer un élément sur un autre élément, l'élément flottant doit être à l'intérieur de l'autre, non pas comme frères et sœurs. Maintenant, votre position:absolute; peut fonctionner!

Source

2015-07-09 16:02:54

Répondre

Questions connexes