dynamic z-index

master
km0 3 years ago
parent a7324b15c6
commit 6bb7f87a68

@ -18,11 +18,17 @@
cillum. Commodo id ut mollit culpa occaecat. cillum. Commodo id ut mollit culpa occaecat.
</main> </main>
<div id="container"> <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> </div>
</body> </body>
</html> </html>

@ -1,16 +1,16 @@
const container = document.getElementById("container"); const container = document.getElementById("container");
// console.log(container.children); // console.log(container.children);
let images = Array.from(container.children); let contents = Array.from(container.children);
// console.log(images); // console.log(images);
// for (index in images) { contents.forEach((item) => {
// console.log(images[index]); console.log(item);
// }
images.forEach((image) => {
left = Math.random() * 100; left = Math.random() * 100;
top = 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;
}); });

@ -13,3 +13,11 @@ main {
#container img { #container img {
position: absolute; position: absolute;
} }
#container p {
position: absolute;
font-size: 2rem;
color: red;
background-color: white;
width: 50ch;
}

Loading…
Cancel
Save