Hola!
Estuve jugando un poco con la propiedad z-index para hacer lo siguiente:
Tengo 1 capa, con posición relativa y otra dentro con absoluta, el tema, es que quiero que cuando se haga clic en la primera capa, me muestra la que este dentro. Todo bien hasta ahí, lo hace. Pero el tema es que al mostrar la segunda capa, es como si quedara detrás de todo el contenido del sitio, y lo que necesito es que quede de frente.
Les coloco el código de como lo estoy haciendo:
Código HTML:
<table>
<tr>
<td>
<div style="position: relative; border: 1px solid black; border-right: white;" onclick="document.getElementById('algo').style.visibility = 'visible';">
<input type="checkbox" name="lugar[<?=$i?>]" id="lugar<?=$i?>" value="<?=$cl[0]?>"><?=$muestralo?> OPPPPPPP
<div style="width: 100px; height: 100px; position: absolute; background-color: #bad9a3; top: -1px; padding: 2px; border: 1px solid black; visibility: hidden;" id="algo">
PMN1 <input type="checkbox" name="lugar[<?=$i?>]" id="lugar<?=$i?>" value="<?=$cl[0]?>"><br />
PMN2 <input type="checkbox" name="lugar[<?=$i?>]" id="lugar<?=$i?>" value="<?=$cl[0]?>"><br />
</div>
</div>
</td>
<td>
<div style="position: relative; border: 1px solid black; border-right: white;" onclick="document.getElementById('algo2').style.visibility = 'visible';">
<input type="checkbox" name="lugar[<?=$i?>]" id="lugar<?=$i?>" value="<?=$cl[0]?>"><?=$muestralo?> OPPPPPPP
<div style="width: 100px; height: 100px; position: absolute; background-color: #bad9a3; top: -1px; padding: 2px; border: 1px solid black; visibility: hidden;" id="algo2">
<input type="checkbox" name="lugar[<?=$i?>]" id="lugar<?=$i?>" value="<?=$cl[0]?>"> PMN1<br />
<input type="checkbox" name="lugar[<?=$i?>]" id="lugar<?=$i?>" value="<?=$cl[0]?>"> PMN2<br />
</div>
</div>
</td>
</tr>
</table> Pueden probarlo haciendo clic en el texto, y verán como muestra el otro div, pero detrás del contenido que está al lado.
No me manejo mucho en CSS. Pero si me dan una ayudadita con esto se los agradecería.