Positions, Float, Media Queries - z-index

pktcodes · pktcodes · commit c5d2f467a80c · 2022-11-07T21:02:18.000-06:00
diff --git a/index.html b/index.html
@@ -12,7 +12,13 @@
 
   <body>
     <div class="banner">
-      <h1>hello world, I am using media queries in CSS</h1>
+      <img src="./small.jpeg" alt="small retro" class="first-image" />
+      <img src="./big.jpeg" alt="big retro" class="second-image" />
+      <img
+        src="./images/folder-img.jpeg"
+        alt="folder retro"
+        class="third-image"
+      />
     </div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,66 +1,37 @@
 /* 
-Media Queries
-Responsive Design
-Style Elements on Different Screen Sizes
-min-width: --- starting from
-max-width: --- up to
-Mobile First
+z-index --- z-axis
+0 - default
+does not work on position:static;
 */
 
-body {
-  background: yellow;
+img {
+  width: 250px;
+  height: 250px;
+  position: absolute;
 }
 
 .banner {
-  background: blue;
-  color: white;
-  text-align: center;
-  text-decoration: underline;
-  text-transform: capitalize;
+  position: relative;
+  border: 5px solid red;
+  width: 80vw;
+  height: 75vh;
+  margin: 50px auto;
 }
 
-/* @media screen and (min-width: 576px) {
-  body {
-    background: blue;
-  }
-
-  .banner {
-    background: yellow;
-    color: black;
-    font-size: 40px;
-  }
+.first-image {
+  top: 0;
+  left: 0;
+  z-index: 3;
 }
 
-@media screen and (min-width: 776px) {
-  body {
-    background: green;
-  }
-
-  .banner {
-    background: fuchsia;
-    color: black;
-  }
-} */
-
-@media screen and (max-width: 576px) {
-  body {
-    background: blue;
-  }
-
-  .banner {
-    background: yellow;
-    color: black;
-  }
+.second-image {
+  top: 10%;
+  left: 10%;
+  z-index: 2;
 }
 
-/* Larger max-width overrides other max-width */
-@media screen and (max-width: 776px) {
-  body {
-    background: green;
-  }
-
-  .banner {
-    background: fuchsia;
-    color: black;
-  }
+.third-image {
+  top: 20%;
+  left: 20%;
+  z-index: -1;
 }
