Hola edudw, te aconsejo que intentes hacerlo sin usar posiciones absolutas, ya que si el tamaño de un elemento cambia se corre el riesgo de superponer elementos como detallas que te ocurre.
<div id="superior" style="width:529px; height:200px; z-index:1; background-color: #999966; layer-background-color: #999966; border: 1px none #000000;">este es el texto, este es el texto, este es el texto, este es el texto, este es el texto, este es el texto, este es el texto, este es el texto, </div>
<div id="inferior" style="width:530px; height:160px; z-index:2; background-color: #99CCFF; layer-background-color: #99CCFF; border: 1px none #000000;"></div>
lo unico que hice fue sacar un poco de codigo, para separarlos entre ellos puedes usar margin-top:10px por poner un ejemplo.
espero que haya servido de alguna ayuda, Saludos!
