排列这些图像时如何使用z索引(或者应该使用z索引）

How do I use z-index (or should I) when arranging these images?

本文关键字：索引 或者 图像 何使用 排列      更新时间：2023-09-26

我当前使用.onload在打开浏览器时随机排列图像。加载页面时，图像会随机"扩散"到页面上。当单击它们时，它们会被带到屏幕上的特定坐标。第一张图片是一个回收站。我希望这张图片是中心图片，所有其他图片都在里面（或者在这种情况下是"后面"）。我应该为每个单独的图像设置z索引吗？这是我所拥有的：

任何建议都很有用！

<html>
<head>
<style>
    body{
        padding: 0;
        margin: 0;   
    }
    div{
        position: fixed;
        top: 0;
        left: 300;
        width: 35%;
        height: 35%;
        float: left;
        transition: width 5s, top 5s, left 5s;
    }
    div:hover{
        width: 100%;
    }

</style>
</head>

<body>
   <div class="div">
    <a target="_blank">
     <img src="curbside%20collection%20empty%20yellow%20bin.png" alt= width=100% height=100%>
    </a>
   </div>

   <div class="div">
    <a target="_blank">
     <img src="Bomb.png" alt= width=50% height=50%>
    </a>
   </div>
   <script>
    document.body.onload = function() {
        var mycolours = [];
        var elements = 
        document.getElementsByTagName("div");
        for(var i = 0; i < elements.length; i++){
            elements[i].style.backgroundColor =
                mycolours[i%mycolours.length]; // remainder operator magic
                    elements[i].style.top = Math.random() * innerHeight;
                    elements[i].style.left = Math.random() * innerWidth;
            elements[i].onclick = function(){
                console.log(this.style.top);
                if(this.style.top === "300px"){
                    this.style.top = Math.random() * window.innerHeight;
                    this.style.left = Math.random() * window.innerWidth;
                }
                else{
                    this.style.top = 300;
                    this.style.left = 500;
                }       
              }
         }
    }
</script>
</body>
</html>

我建议使用class的，而不是必须设置每个图像的z-index。这样，你就可以设置图像类的属性，比如说，你的图像类都有一个特定的z-index，然后你也可以为回收箱设置另一个类

我也认为你目前使用class是错误的。

为了在CSS中选择具有类的DOM元素，您应该使用.（句点）作为前缀。您使用CSS的方式是选择div DOM元素

即。

#div { //properties of the element with "div" as the ID }
.div { //properties of all elements with the "div" class }
div  { //properties of <div> elements }

请记住，一个类可以应用于DOM内部的多个元素，但一个ID只能应用于DOM内的一个元素。

相关文章：