Learn about the z-index attribute in CSS in three minutes

z-index attribute in css

When doing projects, it is often used to pop up a layer, and then in this layer Operate on the pop-up layer, and when the operation is completed, close the pop-up layer, or click elsewhere to close the layer.

Usually the z-index value is set in the p style. For example, if the parent layer sets z-index: 100, the child layer will be set to greater than 100. When the parent layer pops up, the child layer can be displayed.

For example (write briefly):

<p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 100;height:300px" id="p1" >
 <p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 101;height:100px" id="p2" >
 </p>
</p>

Close the pop-up layer: $("#p1").hide(); //Need to quote jquery .js file

We can also click on the rest of the parent layer to hide the parent layer. We only need to add an event on p1 to trigger the hide() function. However, when running, I found that when I click on the child layer The event of p1 is also triggered, thereby closing the pop-up layer. Obviously we do not need the effect. There is obviously no event set for p2, so why is it triggered? How to solve?

Because no matter how high your child level is set, the parent event will be triggered, and setting z-index to 10000 will not work.

Solution:

$('#p2').click(function (e) {
            e.stopPropagation();
            return false;
        });

Just add an event on p2 and use "e.stopPropagation();" to prevent bubbling, so that the p1 event will not be triggered.

Thank you everyone for reading, I hope you will benefit a lot

This article is reproduced from: https://blog.csdn.net/lilinoscar/article/details/51860462

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of Learn about the z-index attribute in CSS in three minutes. For more information, please follow other related articles on the PHP Chinese website!