在安排这些图像时如何使用z-index（或我应该使用）？

I am currently using an .onload to randomly arrange images upon opening of the browser. When the page is loaded, the images randomly "spread" onto the page. When they are clicked, they are brought to a specific coordinate on the screen. The first image is a recycling bin. I would like for this image to be the center image and for all other images to go inside it (or in this case "behind" it). Should I set up a z-index for every individual image? Here is what I have:

我目前正在使用.onload在打开浏览器时随机排列图像。加载页面时,图像随机“扩散”到页面上。单击它们时,它们将被带到屏幕上的特定坐标。第一张图片是回收箱。我希望这个图像成为中心图像,并让所有其他图像进入其中(或者在这种情况下“后面”它)。我应该为每个单独的图像设置z-index吗?这是我有的:

Any suggestions are helpful!

任何建议都有帮助!

<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>

1 个解决方案

#1

I would suggest using class's instead of having to set each image's z-index This way you can set the properties of, lets say, your image class to all have a certain z-index and then you can also have another class for recycle bins

我建议使用类而不必设置每个图像的z-index这样你就可以设置你的图像类的属性,所有的都有一个z-index,然后你还可以有另一个类用于回收站

I also believe your current use of class is wrong.

我也相信你目前使用的课程是错误的。

In order to select a DOM element with a class in CSS you are supposed to use a . (period) as the prefix. The way you are using it your CSS is selecting the div DOM element

为了在CSS中选择带有类的DOM元素,您应该使用。 (句号)作为前缀。您使用CSS的方式是选择div DOM元素

ie.

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

Keep in mind - a Class can be applied to multiple Elements inside of a DOM, but an ID can only be applied to one element inside of a DOM.

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

#1