From 6bb7f87a6817f2f65e1754c9f119275a9824a65e Mon Sep 17 00:00:00 2001
From: lzzfnc <luzzanafrancesco@gmail.com>
Date: Mon, 8 Nov 2021 18:02:56 +0100
Subject: [PATCH] dynamic z-index

---
 index.html | 16 +++++++++++-----
 script.js  | 16 ++++++++--------
 style.css  |  8 ++++++++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index aac19d3..e7d7a7b 100644
--- a/index.html
+++ b/index.html
@@ -18,11 +18,17 @@
 			cillum. Commodo id ut mollit culpa occaecat.
 		</main>
 		<div id="container">
-			<img src="./assets/shark.png" style="left: 32%; top: 43%" />
-			<img
-				src="./assets/you-tiao-chinese-donut-cakwe-vegan-friendly-recipe-main-photo.jpg"
-				style="left: 50%; top: 23%"
-			/>
+			<img src="./assets/shark.png" />
+			<img src="./assets/you-tiao-chinese-donut-cakwe-vegan-friendly-recipe-main-photo.jpg" />
+			<p>
+				Quis incididunt dolore commodo eiusmod tempor aliquip do eu incididunt do culpa ut.
+				Ut excepteur exercitation consectetur consectetur duis consectetur officia eiusmod
+				et adipisicing. Eu qui ut eu cillum excepteur aute nulla incididunt amet deserunt
+				ipsum aliquip aliqua Lorem. Nulla aute dolor occaecat aliqua. Aliqua Lorem quis
+				proident ad sunt reprehenderit esse ad. Ullamco ut duis quis veniam mollit mollit
+				duis tempor laborum minim. Fugiat in dolore laborum excepteur magna eiusmod
+				adipisicing do excepteur voluptate et in.
+			</p>
 		</div>
 	</body>
 </html>
diff --git a/script.js b/script.js
index 73dd71a..1cfbe6f 100644
--- a/script.js
+++ b/script.js
@@ -1,16 +1,16 @@
 const container = document.getElementById("container");
 // console.log(container.children);
 
-let images = Array.from(container.children);
+let contents = Array.from(container.children);
 // console.log(images);
 
-// for (index in images) {
-// 	console.log(images[index]);
-// }
-
-images.forEach((image) => {
+contents.forEach((item) => {
+	console.log(item);
 	left = Math.random() * 100;
 	top = Math.random() * 100;
-	image.style.left = left + "%";
-	image.style.top = top + "%";
+	zIndex = Math.round(Math.random() * 1000);
+
+	item.style.left = left + "%";
+	item.style.top = top + "%";
+	item.style.zIndex = zIndex;
 });
diff --git a/style.css b/style.css
index f6e873d..28ba4a5 100644
--- a/style.css
+++ b/style.css
@@ -13,3 +13,11 @@ main {
 #container img {
 	position: absolute;
 }
+
+#container p {
+	position: absolute;
+	font-size: 2rem;
+	color: red;
+	background-color: white;
+	width: 50ch;
+}