title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>A prototype</title> <link href='css/main.css' rel='stylesheet'> <script src='js/main.js' defer></script> </head> <body> <div style="z-index: 0;"></div> <div></div> <div></div> <div style="z-index: 3;"></div> <div></div> <div></div> </body> </html>
div{background:red; width:200px; height:200px; position:absolute; left:0; top:0;} div:nth-child(1){left:10px; top:10px; background:blue;} div:nth-child(2){left:20px; top:20px; background:green;} div:nth-child(3){left:30px; top:30px; background:gray;} div:nth-child(4){left:40px; top:40px; background:yellow;} div:nth-child(5){left:50px; top:50px; background:pink;}
let d = document.querySelectorAll('div') d.forEach(element => { element.dataset.zIndex = window.getComputedStyle(element).getPropertyValue('z-index') });
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code