Objeto position absolute se sale del contenedor.

Rafael · #1 (**permalink**) 31/07/2011, 12:02

Hola. Pregunta.
¿No se supone que el posicionamiento absoluto es absoluto con respecto de la caja contenedora?

Tengo este código...

Código PHP:

  <head>
<style>
div#Cuerpo {
    width: 960px; margin: 0 auto; background-color: #0F0;}
    
div#CajaNecia {
    position: absolute; bottom: 0px; right: 0px;
    width: 100px; height: 100px; background-color: #F00;}
</style>
</head>
<body>

<div id="Cuerpo">
<p>Skjd hfjhs dkjhksjdfhksjhf ksjdhf ksjh fksjh fksjhdfksj fksjhdf ksjhf ksjhdf ksjhf ksjhf ksjdhf ksjhdf ksjhdfksjhdf ksjdhf ksjfh ksjhf ksjhf ksjdhf ksjfh ksjdfh ksjdhf ksjdhf ksjhdf ksjdhfksjdfh ksjdfh ksjdhf ksjdhf ksjdfh ksjdfhksjdfh ksjdfh ksjdfh ksjdfh ksjdhf ksjdfh ksjdhf ksjhdf ksjdfh ksjdfh ksjdhfksjdfh ksjdhf.</p>

<div id="CajaNecia">Soy una necia</div>

</div>

</body>

El contenedor tiene un ancho muy definido, que el obediente párrafo de texto está respetando... pero la maldita caja verde no...

¿Y ahora quién podrá ayudarme?

pitufoweb · #2 (**permalink**) 31/07/2011, 12:56

El posicionamiento absoluto es absoluto con respecto a la ventana del navegador. Para posicionarlo con respecto a otro elemento, tienes que ponerle posición relative al elemento que quieres que tome como referencia para posicionarse.

Ejemplo:

Código HTML:

<head>
<style>
div#Cuerpo {  position: relative;
    width: 960px; margin: 0 auto; background-color: #0F0;}
    
div#CajaNecia {
    position: absolute; bottom: 0px; right: 0px;
    width: 100px; height: 100px; background-color: #F00;}
</style>
</head>
<body>

<div id="Cuerpo">
<p>Skjd hfjhs dkjhksjdfhksjhf ksjdhf ksjh fksjh fksjhdfksj fksjhdf ksjhf ksjhdf ksjhf ksjhf ksjdhf ksjhdf ksjhdfksjhdf ksjdhf ksjfh ksjhf ksjhf ksjdhf ksjfh ksjdfh ksjdhf ksjdhf ksjhdf ksjdhfksjdfh ksjdfh ksjdhf ksjdhf ksjdfh ksjdfhksjdfh ksjdfh ksjdfh ksjdfh ksjdhf ksjdfh ksjdhf ksjhdf ksjdfh ksjdfh ksjdhfksjdfh ksjdhf.</p>

<div id="CajaNecia">Soy una necia</div>

</div>

</body>

Saludos

Rafael · #3 (**permalink**) 31/07/2011, 13:31

¡Gracias Pitufo!

pitufoweb · #4 (**permalink**) 31/07/2011, 14:57

Cita:

Iniciado por Rafael

¡Gracias Pitufo!

De nada

amdisenoweb · #5 (**permalink**) 02/08/2011, 03:20

Siquieres que se quede dento como dice pitufoweb debes ponerle o static o relative, aqui tienes un ejemplo en el puedes cambar las posiciones.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_position