Tema: Divs absolutos y relativos
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 14/03/2011, 15:03
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 11 meses
Puntos: 539
Respuesta: Divs absolutos y relativos
Cita:
Iniciado por Naahuel Ver Mensaje
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 Ver Mensaje
Sii.. ahi me funciono bien, gracias a todos por la ayuda!!

Saludos!!!
Cita:
Iniciado por agpucci Ver Mensaje
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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es-es"><head>
  3.  
  4.  
  5. <title>Posicion fija para IE6 (fixed) - Recursos CSS - araudi.net</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  7. <meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre">
  8. <meta name="Description" content="Posicion fija para IE6 (fixed) - Recursos CSS - araudi.net">
  9. <meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL">
  10. <meta name="Subject" content="Recursos CSS">
  11. <meta name="Language" content="español">
  12. <meta name="Robots" content="index, follow">
  13. <link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es">
  14. <style type="text/css">
  15. * {margin:0; padding:0;}
  16. html, body {width:100%; 
  17. height:100%; 
  18. overflow:hidden; 
  19. }
  20. #contenido {width:100%; 
  21. height:100%;
  22. overflow: auto;
  23. } 
  24. #fijo1 { 
  25. position:absolute;
  26. width:200px;
  27. height:200px;
  28. border:1px solid #000;
  29. background:#cff;
  30. left:50%;
  31. top:0;
  32. }
  33. #fijo2 {
  34. position:absolute;
  35. width:200px;
  36. height:200px;
  37. border:1px solid #000;
  38. background:red;
  39. left:50%;
  40. bottom:0;
  41. }
  42. </style>
  43. </head><body>
  44. <div id="contenido">
  45. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  46. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  47. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  48. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  49. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  50. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  51. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  52. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  53. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  54. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  55. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  56. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  57. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  58. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  59. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  60. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  61. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  62. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  63. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  64. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  65. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  66. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  67. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  68. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  69. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  70. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  71. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  72. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  73. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  74. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  75. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  76. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  77. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  78. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  79. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  80. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  81. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  82. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  83. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  84. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  85. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  86. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  87. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  88. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  89. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  90. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  91. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  92. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  93. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  94. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  95. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  96. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
  97. </div>
  98. <div id="fijo1">Fijo1</div>
  99. <div id="fijo2">Fijo2</div>
  100. </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.