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

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

Learning about UDP in Linux

MySQL 8.0.12 winx64 decompression version installation graphic tutorial

Detailed explanation of Vue data proxy

Create a virtual environment using venv in python3 in Ubuntu

Learn SQL query execution order from scratch

Docker uses a single image to map to multiple ports

Detailed explanation of MySQL 5.7 MGR single master determination master node method

Examples of optimization techniques for slow query efficiency in MySQL IN statements

A brief discussion on the differences between the three major databases: Mysql, SqlServer, and Oracle

How to use a game controller in CocosCreator

Recommend

MySQL database terminal - common operation command codes

Detailed explanation of the reasons and solutions for Docker failing to start normally

Docker container data volume named mount and anonymous mount issues

Detailed explanation of Mysql communication protocol

About IE8 compatibility: Explanation of the X-UA-Compatible attribute

Teach you how to use MySQL8 recursive method

Vue recursively implements three-level menu

Learn v-model and its modifiers in one article

How to install Odoo12 development environment on Windows 10

Implementation code of jquery step progress axis plug-in

WePY cloud development practice in Linux command query applet

A detailed guide to custom directives in Vue

About the usage and precautions of promise in javascript (recommended)

JavaScript form validation example

Detailed tutorial on Docker pulling Oracle 11g image configuration