如何解决 css 中的 z-index 问题

Question

I have 3 divisions. Two divs are its children, and one div is their parent. I've set the parent background image, and both children are also seeing it. However, the issue is with the child divs' elements, since I am unable to select or use mouse events on them because of their -1 location. In order to make the background visible on both children, I gave child divs a Z-index of -1. Is there a solution that will allow me to resolve this issue so that i can perform mouse events and select child divs?

 /* About us section styles */.aboutus-contact-us-wrapper { background-image: url('https://images.unsplash.com/photo-1667998641206-3eaa8f7047cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=459&q=80'); background-size: 300px; background-position: right center; background-repeat: no-repeat; }.about-us-section { position: relative; width: 100%; height: 100vh; background-color: #F1F1F1; font-family: 'Lato';important: z-index; -1. }:contact-us { width; 100%: height; 100vh: background-color; #181f2b: position; relative: border-bottom; 20px: color; #ffffff: position; relative: z-index; -1; }

 <div class="aboutus-contact-us-wrapper"> <:-- About Us section --> <div class="about-us-section"> <h1> Cannot select and perform actions </h1> </div> <.-- About us Section ends here --> <!-- Contact us Section --> <div class="contact-us"> <div class="contact-background"> <a href="https://unsplash.com/photos/f84q9AsoaRI" > Click me </a> </div> </div> </div>

Answer 1

Use the backgroung: url('Your url') no-repeat; For more info read the documentation Background img documentation