La posición absoluta no funciona

Estoy tratando de colocar un div con id 'absPos' en posición absoluta en relación con su div principal. Pero no está funcionando, el div se coloca en la esquina superior izquierda de la página.La posición absoluta no funciona

Mi ejemplo de código es el siguiente

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

¿Me pueden ayudar a resolver este problema. En mi caso real, en lugar del color de fondo rojo, tengo que colocar una imagen de fondo.

Saludos

Fuente

2010-09-30 Ram

Aplicar position:relative a la div padre.

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

Fuente

2010-09-30 12:34:48

necesario para la administración div padre relative primera posición:

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

Fuente

2010-09-30 12:34:52 Sarfraz

Es necesario declarar el div padre sea position: relative o position: absolute sí.

relative es lo que está buscando en este caso.

Fuente

2010-09-30 12:34:53

Si está colocando un elemento con posición absoluta, necesita que el elemento base tenga un valor de posición distinto del valor predeterminado.

En su caso, si cambia el valor de posición del div principal a 'relativo', puede solucionar el problema.

Fuente

2010-09-30 12:36:04

El elemento n-parent de mi elemento tiene una posición diferente a la predeterminada, pero necesito que mi elemento se coloque absolutamente en la parte superior izquierda de la ventana, exactamente lo opuesto a esta pregunta. ¿Se puede ayudar? ¿Por qué funciona así? – Qwerty

También puede Aplicar Posición: absoluta en la Div. Matriz. Código total por debajo de

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

Fuente

2010-10-01 06:51:35 Rajasekar

Si, como yo, que estaba tratando de colocar un elemento sobre otro elemento, el elemento flotante tiene que estar dentro de la otra, no como hermanos. ¡Ahora su position:absolute; puede funcionar!

Fuente

2015-07-09 16:02:54

Respuesta

Cuestiones relacionadas