El primer problema que veo es que en el CSS tienes .maquina
, pero luego en el código se hace class="MAQUINA"
, por lo que los estilos no se aplicarán a ese div
en particular. CSS diferencia las mayúsculas y minúsculas en nombres de clase e ID (si funcionaría en quirck mode, pero no sé si ése es el caso).
Modificando la clase de "MAQUINA" a "maquina" y ajustando la posición de top y right se puede obtener el siguiente resultado que es parecido a lo que buscas:
.maquina {
position: absolute;
right: 150px;
top: 138px;
}
.tanque1 {
position: absolute;
right: 210px;
top: 200px;
}
.tanque2 {
position: absolute;
right: 240px;
top: 217px;
}
.tanque3 {
position: absolute;
right: 270px;
top: 234px;
}
<div class="col xs-4">
<div class="maquina"><img src="http://i.imgur.com/jpBVqLS.png"></div>
<div class="tanque1"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
<div class="tanque2"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
<div class="tanque3"><img src="http://i.imgur.com/M0TM9q7.png.png"></div>
</div>
Pero que deja en evidencia otros problemas que hay:
Voy a cambiar el código un poco más para ponerte un ejemplo que funcionará igual independientemente del número de tanques que tenga la máquina, y que limpia un poco el código HTML para que no se vea excesivo. La idea es sólo usar div
con las imágenes de fondo y darles diferente posicionamiento dependiendo de cuántos haya (con nth-child
).
En este ejemplo puedes ver cómo funciona para máquinas de 1 a 5 tanques:
.contenedor-maquina {
position: relative;
min-height:300px;
}
.contenedor-maquina>div {
position: absolute;
background-size: cover;
}
.maquina {
background-image: url(http://i.imgur.com/jpBVqLS.png);
width: 150px;
height: 186px;
right: 115px;
top: 105px;
}
.tanque {
background-image: url(http://i.imgur.com/M0TM9q7.png.png);
width: 91px;
height: 104px;
}
.tanque:nth-child(2) { right: 210px; top: 200px; }
.tanque:nth-child(3) { right: 240px; top: 217px; }
.tanque:nth-child(4) { right: 270px; top: 234px; }
.tanque:nth-child(5) { right: 300px; top: 251px; }
.tanque:nth-child(6) { right: 330px; top: 268px; }
<div class="col xs-4 contenedor-maquina">
<div class="maquina"></div>
<div class="tanque"></div>
<div class="tanque"></div>
<div class="tanque"></div>
</div>
<div class="col xs-4 contenedor-maquina">
<div class="maquina"></div>
<div class="tanque"></div>
</div>
<div class="col xs-4 contenedor-maquina">
<div class="maquina"></div>
<div class="tanque"></div>
<div class="tanque"></div>
<div class="tanque"></div>
<div class="tanque"></div>
<div class="tanque"></div>
</div>
<canvas>
y javascript o sólo CSS/HTML y esa etiqueta la has agregado arbitrariamente?