Shulou(Shulou.com)06/03 Report--

This article will explain in detail for you how to solve the problem that elements with negative z-index can not be clicked. The content of the article is of high quality, so the editor shares it for you to do a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Recently, I did a rear projection advertisement because the default page did not set z-index. I found that if the element whose z-index is negative cannot be clicked, the solution is to set the z-index of the rear projection advertisement to 1 and increase the z-index of other elements.

Suppose there is a need:

Header and the main area are already there, and now you need to add a background image to the page, requiring the background layer to be below the main area, but the part outside the main area is clickable, which is a link.

After thinking about it briefly, I knew that it could not be implemented with a background image, because the background image was unclickable. Although you can barely use js to monitor body clicks and then based on the click location to determine whether the background picture clicked, but this is too clumsy. So decided to shop one floor below the main area and set up z-index:-1. The picture is set to the background image of bgImg. The code is as follows:

BGImg {position: absolute; z-index:-1; background: url (...) No-repeat center;}

However, it turns out that after this setting, the bgImg cannot be clicked, and the hand shape will not be displayed during hover, because elements with a negative z-index will be placed under the body layer, so both the click and hover events are overwritten by the body layer.

Solution:

1. Z-index is set to 0. The main area is set to position:relative; z-index: 1; this ensures that the background layer does not affect the main area, and parts outside the main area can be clicked.

two。 The structure is the same as 1, but it is implemented in a different way. Instead of using position, use a negative margin-bottom implementation:

Background layer {height: 500px; margin-bottom:-500px;}

No changes need to be made to the main area.

The principle is that a negative margin-bottom pulls up the elements below, and the height of the background layer = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top+ margin-bottom = 0. All properties that are not set are reset to 0 in reset.css. So the background layer does not occupy the space of the document stream and can be clicked on at the same time.

On how to solve the z-index is negative elements can not click on the problem to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.