Foros del Web » Creando para Internet » CSS »

Objeto position absolute se sale del contenedor.

Estas en el tema de Objeto position absolute se sale del contenedor. en el foro de CSS en Foros del Web. 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 > ...
  #1 (permalink)  
Antiguo 31/07/2011, 12:02
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Objeto position absolute se sale del contenedor.

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 {
    
width960pxmargin0 autobackground-color#0F0;}
    
div#CajaNecia {
    
positionabsolutebottom0pxright0px;
    
width100pxheight100pxbackground-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?

Última edición por Rafael; 31/07/2011 a las 12:09
  #2 (permalink)  
Antiguo 31/07/2011, 12:56
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 2 meses
Puntos: 181
Respuesta: Objeto position absolute se sale del contenedor.

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
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 31/07/2011, 13:31
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Objeto position absolute se sale del contenedor.

¡Gracias Pitufo!
  #4 (permalink)  
Antiguo 31/07/2011, 14:57
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 2 meses
Puntos: 181
Respuesta: Objeto position absolute se sale del contenedor.

Cita:
Iniciado por Rafael Ver Mensaje
¡Gracias Pitufo!
De nada
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 02/08/2011, 03:20
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 12 años, 8 meses
Puntos: 5
Respuesta: Objeto position absolute se sale del contenedor.

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

Etiquetas: ancho, objeto, position, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:24.