Más sobre posiciones

<h1>Pruebas posiciones</h1>
<div class="relative">Elemento con posición relativa
 
 <div id="rb">Hola que tal estamos yo estoy muy bien</div>
 <div id="lb"></div>
 <div id="lt"></div>
 <div id="rt"></div>
 <div id="center"><p>A</p></div>
</div>
.relative {
 position: relative;
 width: 400px;
 height: 200px;
 border: 3px solid #73AD21;
} 
#rb,#lb,#rt,#lt,#center{
 position:absolute;
 width:50px;
 height:50px;
 border:solid 2px blue;
 margin:0;
}
#rb{
 right:0;
 bottom:0;
 border:solid 2px blue;
}
#lb{
 left:0;
 bottom:0;
 border:solid 2px green;
}
#rt{
 right:0;
 top:0;
 border:solid 2px yellow;
}
#lt{
 left:0;
 top:0;
 border:solid 2px red;
}
#center{
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 border:dotted 2px black;
 text-align:center;
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos