Debiste ensayar un poco, solo existía un error con el espacio en el true...
document.getElementById(IdElemt).contentEditable=' true';
Me falto tiempo para probarlo, pero imagine que funcionaria, mis disculpas...
Prueba arrastrar y soltar las capas...
<html>
<head>
<script>
function Activar(elemento){
IdElemt = elemento.id;
document.getElementById(IdElemt).contentEditable=' true';
document.getElementById(IdElemt).focus();
}
</script>
<style>
#contenedor{
padding:30px;
margin:30px;
width:80%;
height:100%;
background-color: #eee;
text-align:center;
position:relative;
}
#materia{
width:150px;
height:30px;
position: Absolute;
z-index: 0;
float: left;
background-color: #ffcc00;
}
#materia:hover{
background-color: #ffee66;
}
</style>
</head>
<body>
<div id="contenedor" onClick="Activar(this)">
<div id="materia">Click here...</div>
<div id="materia">Click here...</div>
</div>
</body>
</html>
Aun hace falta poder agregar mas capas, Un saludo...