Finally proper overlapping css rules on the tiles

frontend/src/components/Hand.vue

@@ -22,20 +22,20 @@ export default {
     },
     mounted(){
         this.Hand= new Hand();
-            this.Hand.draw(new TileModel(8));
-            this.Hand.draw(new TileModel(11));
-            this.Hand.draw(new TileModel(11));
-            this.Hand.draw(new TileModel(14));
-            this.Hand.draw(new TileModel(16));
-            this.Hand.draw(new TileModel(7));
-            this.Hand.draw(new TileModel(4));
-            this.Hand.draw(new TileModel(5));
-            this.Hand.draw(new TileModel(20));
-            this.Hand.draw(new TileModel(21));
-            this.Hand.draw(new TileModel(22));
-            this.Hand.draw(new TileModel(6));
-            this.Hand.draw(new TileModel(0));
-            this.Hand.sort();
+        this.Hand.draw(new TileModel(8));
+        this.Hand.draw(new TileModel(11));
+        this.Hand.draw(new TileModel(11));
+        this.Hand.draw(new TileModel(14));
+        this.Hand.draw(new TileModel(16));
+        this.Hand.draw(new TileModel(7));
+        this.Hand.draw(new TileModel(4));
+        this.Hand.draw(new TileModel(5));
+        this.Hand.draw(new TileModel(20));
+        this.Hand.draw(new TileModel(21));
+        this.Hand.draw(new TileModel(22));
+        this.Hand.draw(new TileModel(6));
+        this.Hand.draw(new TileModel(0));
+        this.Hand.sort();
         
     },
     updated(){

frontend/src/components/Tile.vue

@@ -42,21 +42,27 @@ export default {
   height: 1px;
 }
 .tile-symbol{
-  height: 1px;
+  position: relative;
     border-radius: 10px;
     background: transparent;
     border: none;
     display: inline-block;
 }
 .tile-background{
+  position: absolute;
+  top: 0;
+  left: 0;
     display: inline-block;
+    z-index: 1;
 }
 .tile-front{
+  position: relative;
+  top: 0;
+  left: 0;
   margin: 0;
   padding: 0;
     display: inline-block;
-  transform: translateY(-100%);   
-  -webkit-transform: translateY(-100%);
+    z-index: 2;
   
 
 }