cros: Adjust position of the PIN keyboard when it's disabled

BUG: 819326
Change-Id: I0afe3443fb1560baf0149e00ce0044a36fc525a3
Reviewed-on: https://chromium-review.googlesource.com/951861Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#541622}

ui/login/account_picker/md_user_pod_row.css

@@ -33,13 +33,27 @@ pin-keyboard {
 }
 
 .pod .pin-container {
-  left: 36px;
   position: absolute;
-  top: 300px;
   width: 234px;
   z-index: 3;
 }
 
+.pod .pin-container.pin-enabled {
+  left: 36px;
+  opacity: 1;
+  top: 300px;
+  transition: opacity 200ms ease-in-out 180ms;
+  visibility: visible;
+}
+
+.pod .pin-container.pin-disabled {
+  opacity: 0; /* Opacity is set to 1 after the pin element is loaded. */
+  transition: none;
+  visibility: hidden; /* Needed because pin-keyboard's offsetHeight is
+                         checked to determine if loaded. */
+  z-index: -1;
+}
+
 .pod.faded {
   opacity: .75;
 }

ui/login/md_screen_container.css

@@ -22,19 +22,6 @@
   perspective: 600px;
 }
 
-.pin-container.pin-enabled {
-  opacity: 1;
-  transition: opacity 200ms ease-in-out 180ms;
-  visibility: visible;
-}
-
-.pin-container.pin-disabled {
-  opacity: 0; /* Opacity is set to 1 after the pin element is loaded. */
-  transition: none;
-  visibility: hidden; /* Needed because pin-keyboard's offsetHeight is
-                         checked to determine if loaded. */
-}
-
 #scroll-container {
   bottom: 0;        /* Allows content overlap with control bar. */
   left: 0;