Solution to the problem that elements with negative z-index cannot be clicked

I was working on a pop-up ad recently. Since the default page does not have a z-index set, I found that elements with a negative z-index cannot be clicked. The solution is to set the z-index of the pop-up ad to 1 and increase the z-index of other elements.

Assume there is such a requirement:

The header and main area are already there. Now we need to add a background image to the page. The background layer is required to be below the main area, but the part outside the main area is clickable and is a link.

After a quick thought, I realized that this couldn't be achieved using a background image because background images are not clickable. Although you can use js to monitor body clicks and then determine whether the background image was clicked based on the click position, this is too clumsy. So I decided to add a layer under the main area and set z-index: -1. The image is set as the background image of bgImg. The code is as follows:

 <!DOCTYPE html>
<html>
    <head>
    <style>
      .bgImg {position: absolute; z-index: -1; background: url(...) no-repeat center;}
    </style>
    </head>
    <body>
         <header></header>
         <div class="bgImg"></div>
         <div class="main"><div>
    </body>
</html>

But it turns out that after this setting, bgImg cannot be clicked, and the hand shape will not be displayed when hovering, because the element with a negative z-index will be placed under the body layer, so the click and hover events are covered by the body layer.

Solution:

1. Set z-index to 0. Set the main area to position:relative; z-index: 1; This ensures that the background layer does not affect the main area, and the part outside the main area can also be clicked.

2. The structure is the same as 1, but the implementation method is different. Instead of using position, use negative margin-bottom:

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

No changes are required in the main area.

The principle is that negative margin-bottom will pull 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. (Unset properties are all reset to 0 in reset.css). So the background layer does not occupy the space of the document flow, and can still be clicked.

<<: Tips for implementing multiple borders in CSS

>>: Detailed explanation of the difference between cesllspacing and cellpadding in table