dic
12
2009

Position:absolute solucionado

Me he roto la cabeza como todos vosotros, pero creo que he conseguido “engañar” al innombrable IE6 para que acepte position:absolute y que además se vea bien en Firefox (no he probado en las últimas versiones de IE ni en Chrome). Ahí va la hoja css:

@charset "utf-8";
/* CSS Document */
 
html, body {
	width:100%;
   height: 100%;
   overflow: hidden;
}
#container {
   top:0px;
   height: 100%;
   overflow: auto;
   position: relative;
   z-index: 1;
   background-color:#FFFFCC;
}
#div1 {
   position: absolute;
   top:20%;
   width:20%;
   height:60%;
   z-index: 2;
   background-color:#FFFF99;
}
#div5 {
   position: absolute;
   top:20%;
   width:60%;
   height:60%;
   z-index: 2;
   left:20%;
   background-color:#FF99CC;
}
#div2 {
	top:0.5%;
   position: absolute;
   width:100%;
   height:20%;
   z-index: 3;
   background-color:#CC3300;
}
#div3 {
   position: absolute;
   height:60%;
   width:20%;
   top:20%;
   left:80%;
   z-index: 2;
   background-color:#FFFF99;
}
#div4 {
	position: absolute;
	top:80%;
	width:100%;
	height:20%;
	z-index: 2;
   	background-color:#FFFF00;
}

…y aquí el html:

 
        <title>Position:absolute en IE6 y Firefox</title>
 
 
 
 
    <div>
 
    </div>
<div>div id=div1</div>
<div>div id=div2</div>
<div>div id=div3</div>
<div>div id=div4</div>
<div>div id=div5</div>

A mí me ha funcionado.

Saludos

Colaborador: Javier Fernández

1 Comment + Add Comment

  • He llagado por casualidad a este post y me ha picado la curiosidad. No sé que problemas tenias con IE6 y el position absolute cuando el problema del ie6 es con el position fixed (he visto que tienes otro post de como solucionarlo). Pero bueno aparte de esto yo solo le añadiría al estilo del #div5 un overflow:auto; ya que entiendo que será donde ira el contenido principal del html y se supone que será extenso y eso supone que según que resolución de pantalla pueda mostrarse todo completo o no.

    Saludos

Leave a comment

Patrocinador

Siguenos

Suscribete

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.

Correo @zoneartcss.com

Obtén una cuenta de @zoneartcss.com gratuita