superposicion de 2 capas dentro de otra capa

deet · #1 (**permalink**) 05/11/2007, 10:42

no encuentro un tutorial que me de una pista de como hacerlo, como dice el titulo necesito superponer dos capas que estan dentro de otra contenedora:

una capa externa que es la contenedora, dentro de ella habría dos capas superpuestas, la mas grande contiene una foto y la mas chica un pequeño texto, simulando una marca de agua que obviamente no tiene transparencia.

Código PHP:

  <div style="postition:relative;border:1px #CCCCCC solid; width:155px; height:102px;">

          <div style="postition:absolute; width:145px; height:92px;"><img src="fotos/thumb/foto.jpg" width="145" height="92" /></div>

        <div style="postition:absolute; right:20px; top:20px; width:55px;">rs</div>

      </div>

DragonX · #2 (**permalink**) 05/11/2007, 11:04

probá con esto:

Código HTML:

#capacontenedora{
  postition:relative;
  border:1px #CCCCCC solid;
  width:155px;
  height:102px;
}
#contenedorfoto{
  postition:absolute;
  width:145px;
  height:92px;
  z-index: 10;
}
#contenedortexto{
  postition:absolute;
  right:20px;
  top:20px;
  width:55px;
  z-index:50;
}
<div id="capacontenedora">
<div id="contenedorfoto">
  <img src="fotos/thumb/foto.jpg" width="145" height="92" />
</div>
<div id="contenedortexto">rs</div>
</div>

deet · #3 (**permalink**) 05/11/2007, 11:17

Código PHP:

   
#capacontenedora{

  postition:relative;

  float:left;

  text-align:left;

  width:145px;

  height:92px;

  margin-left:5px;

}

#contenedorfoto{

  position:absolute;

  width:145px;

  height:92px;

  z-index: 10;

}

#contenedortexto{

  position:absolute;

  z-index:50;

  margin:5px;

  margin-top:70px;

  margin-left:130px;

}

<div id="capacontenedora">

<div id="contenedorfoto">

  <img src="fotos/thumb/foto.jpg" width="145" height="92" />

</div>

<div id="contenedortexto">rs</div>

</div>

DragonX · #4 (**permalink**) 05/11/2007, 11:53

probá con esto:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <style>
#capacontenedora{
  postition:relative;
  border:1px #CCCCCC solid;
  width:155px;
  height:102px;
  background-color:#00f;
}
#contenedorfoto{
  postition:absolute;
  width:145px;
  height:92px;
  z-index: 10;
  background-color:#f00;
}
#contenedortexto{
  postition:absolute;
  right:20px;
  top:20px;
  width:55px;
  z-index:50;
  background-color:#0f0;
}
  </style>
  <body>

<div id="capacontenedora">
<div id="contenedorfoto">
  <img src="fotos/thumb/foto.jpg" width="145" height="92" />

<div id="contenedortexto">rs</div>
</div></div>  
  </body>
</html>