Divs absolutos y relativos

agpucci · #1 (**permalink**) 14/03/2011, 11:10

Muy buenas a todos!!

Estoy con un problemita con unos divs, es asi:
Tengo un div que es el contenedos que lo tengo como relativo, ahi adentro tengo dos divs, uno fixed con top:0 que esta ubicado siempreee arriba y otro tambien fixed con botton:0 que esta siempree abajo.. Pero el problema es que cuando le doy zoom a la pagina esos divs se me solapan, se juntan y se tapan, de que forma puedo evitar este solapamiento??

Gracias!!!!!!!!!!!!!

mtreik · #2 (**permalink**) 14/03/2011, 11:38

Si mira, el problema que comentas es muy sencillo.Primero, lo que yo haría para evitar posibles problemas futuros sería que colocar las div que quieres "fijas" fuera de la div contenedor y asignarles a estas div con position:fixed; una altura con porcentaje. Sería algo así:

Código HTML:

Ver original<body>
<div id="top">
</div>
<div id="contenedor"></div>
<div id="bottom">
</div>

Código CSS:

Ver original#contenedor{
    position: relative;
    width: 900px;
    height: 1000px;
    margin: auto;
}
 
#top{
    background-color: aqua;
    position: fixed;
    top:0px;
    width: 100%;
    height: 20%;
}
 
#bottom{
    background-color: aqua;
    position: fixed;
    bottom:0px;
    width: 100%;
    height: 20%;
}

Con esto evitarás que se te solapen al hacer zoom.

kseso? · #3 (**permalink**) 14/03/2011, 12:00

El punto 0,0 de fixed es la esquina superior izquierda del html. Ojo! no del body, sino del html visible.
Dicho de otra forma: las coordenadas para fixed son el left, right, bottom, top de la ventana del navegador, con independencia de que haya scroll.

Así que la respuesta a su pregunta, ya la debe intuir: no puede hacer nada. Al igual que se le solaparán si reduce el tamaño de la ventana del navegador a una altura menor que la suma de las alturas de los dos fixed.

Naahuel · #4 (**permalink**) 14/03/2011, 12:14

Pues el problema es como dijo kseso?. El posicionado fixed es relativo a la ventana del navegador. Si entiendo bien tu situación, podrías usar este ejemplo:

Código HTML:

Ver original<html>
<head>
    <style type="text/css">
        #contenedor{
            height: 300px;
            width: 400px;
            margin: 10px auto;
            background-color: grey;
            position:relative;
        }
        #top{
            position: absolute;
            width:100%;
            top: 0;
            background-color: red;
        }
        #bottom{
            position: absolute;
            width:100%;
            bottom:0;
            background-color: yellow;
        }
    </style>
</head>
 
<body>
 
    <div id="contenedor">
        <div id="top">
            <p>Top</p>
        </div>
        <div id="bottom">
            <p>Bottom</p>
        </div>
    </div>
</body>
</html>

El div #contenedor está con posicionado relativo mientras que sus divs interiores (#top y #bottom) usan posicionado absoluto. Tené en cuenta que el conetendor general tiene dimensiones especificadas. Esto es necesario en este caso porque al posicionar algo en forma absoluta, lo sacas del flujo y ya no se hace cálculo automático del espacio que necesitan.

agpucci · #5 (**permalink**) 14/03/2011, 12:31

Gracias por las resuestas a todos, ahora lo voy a probar!!

Puede que esto tenga problemas con internet explorer??

saludosss

Naahuel · #6 (**permalink**) 14/03/2011, 12:33

Mm, no. Lo que si da problemas es el position:fixed en Internet Explorer 7 y anterior. A veces hay que hacer algunos artificios para que salga como queremos :)
Pero si se trata de posicionado absoluto, no debería darte problemas (excepto algunos problemas de z-index en IE7 y 6)

agpucci · #7 (**permalink**) 14/03/2011, 14:24

Sii.. ahi me funciono bien, gracias a todos por la ayuda!!

Saludos!!!

sanxuan · #8 (**permalink**) 14/03/2011, 14:37

Sé que es predicar en el desierto, pero hablamos de posicionamiento absoluto y de un elemento posicionado. Lo primero es un nombre y lo segundo un participio pasivo que puede funcionar como adjetivo.
Mil perdones si mi castellano no se corresponde con el de otras partes del planeta.

kseso? · #9 (**permalink**) 14/03/2011, 15:03

Cita:

Iniciado por Naahuel

Mm, no. Lo que si da problemas es el position:fixed en ~~Internet Explorer 7~~ y anterior. A veces hay que hacer algunos artificios para que salga como queremos :)
~~Pero si se trata de posicionado absoluto, no debería darte problemas (excepto algunos problemas de z-index en IE7 y 6)~~

Cita:

Iniciado por agpucci

Sii.. ahi me funciono bien, gracias a todos por la ayuda!!

Saludos!!!

Cita:

Iniciado por agpucci

Muy buenas a todos!!

Estoy con un problemita con unos divs, es asi:
Tengo un div que es el contenedos que lo tengo como relativo, ahi adentro tengo dos divs, uno fixed con top:0 que esta ubicado siempreee arriba y otro tambien fixed con botton:0 que esta siempree abajo.. Pero el problema es que cuando le doy zoom a la pagina esos divs se me solapan, se juntan y se tapan, de que forma puedo evitar este solapamiento??

Gracias!!!!!!!!!!!!!

Quizás sea que no alcancé a comprender la naturaleza de la consulta, pero el mismo solapamiento se dará con independencia de que las dos cajas estén con positión: fixed o que se simule dicho valor para que el ie6 (el 7 sí lo implementa).

Un ejemplo, basado el la realización de Mikmoro:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es-es"><head>
 
 
<title>Posicion fija para IE6 (fixed) - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre">
<meta name="Description" content="Posicion fija para IE6 (fixed) - Recursos CSS - araudi.net">
<meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL">
<meta name="Subject" content="Recursos CSS">
<meta name="Language" content="español">
<meta name="Robots" content="index, follow">
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es">
<style type="text/css">
* {margin:0; padding:0;}
html, body {width:100%; 
height:100%; 
overflow:hidden; 
}
#contenido {width:100%; 
height:100%;
overflow: auto;
} 
#fijo1 { 
position:absolute;
width:200px;
height:200px;
border:1px solid #000;
background:#cff;
left:50%;
top:0;
}
#fijo2 {
position:absolute;
width:200px;
height:200px;
border:1px solid #000;
background:red;
left:50%;
bottom:0;
}
</style>
</head><body>
<div id="contenido">
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
</div>
<div id="fijo1">Fijo1</div>
<div id="fijo2">Fijo2</div>
</body></html>

Hagan zoom o disminuyan el tamaño de la ventana del navegador para ver que llega un momento en que las dos cajas se superponen.

Naahuel · #10 (**permalink**) 14/03/2011, 15:17

kseso?: Gracias por la corrección, es verdad que funciona bien en IE7.

Mi interpretación del problema fue que lo que agpucci quería era tener dos elementos con posicionamiento absoluto dentro de un contenedor específico y no de toda la ventana, dado que había posicionado al div padre con position:relative;

sanxuan · #11 (**permalink**) 14/03/2011, 15:44

Naahuel, no lo tome como un tema personal. Yo mismo cometo muchos errores al escribir. Aún más cuando uso un teclado. Muchos hilos no me molesto en contestarlos por hacer uso de abreviaturas estilo SMS o por no saber explicar sus dudas. No es el caso.
Entiendo que ha sido un desliz. El comentario no iba destinado a su persona sino al público en general.
Mi experiencia es que creamos usos específicos de la lengua para profesiones específicas con el fin de no cometer errores. Los marinos podrían haber usado derecha e izquierda en lugar de babor y estribor, ya no digo cuando hablan de barlovento y sotavento. Algo así ocurre continuamente cuando alguna gente confunde una posición estática con una fija hablando de CSS.
Lamento no haber sido capaz de expresarme de manera adecuada.

Naahuel · #12 (**permalink**) 14/03/2011, 15:52

Yo entiendo, sanxuan. Reconozco que usé mal esos términos y la verdad ni lo había notado. En computación siempre han existido términos incorrectos usados con muchísima frecuencia (deshabibilitar, particionar, etc) pero el mio no es el caso. Sólo trataba de ponerle humor con ese último mensaje.

Un saludo y perdón a los demás por salir del tema.