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>