dynamic z-index

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/shark.png" />
-			<img
+			<img src="./assets/you-tiao-chinese-donut-cakwe-vegan-friendly-recipe-main-photo.jpg" />
-				src="./assets/you-tiao-chinese-donut-cakwe-vegan-friendly-recipe-main-photo.jpg"
+			<p>
-				style="left: 50%; top: 23%"
+				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>

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) {
+contents.forEach((item) => {
-// 	console.log(images[index]);
+	console.log(item);
-// }
-
-images.forEach((image) => {
 	left = Math.random() * 100;
 	top = Math.random() * 100;
-	image.style.left = left + "%";
+	zIndex = Math.round(Math.random() * 1000);
-	image.style.top = top + "%";
+
+	item.style.left = left + "%";
+	item.style.top = top + "%";
+	item.style.zIndex = zIndex;
 });

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;
+}