How to resolve z-index issues in css-CodePudding

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 >
        <!-- About Us section -->
        <div >
           <h1> Cannot select and perform actions </h1>
        </div>

        <!-- About us Section ends here -->

        <!-- Contact us Section  -->
        <div >
          <div >
<a href="https://unsplash.com/photos/f84q9AsoaRI" > Click me </a>
              </div>
            </div>
          </div>

CodePudding user response：

z-index of the 2 <div> to 1and the one of the background to 100. Try setting the 2 <div> elements to absolute then use top bottom left right to move them back into the position you want them to be.

CodePudding user response：

did you try setting the parent to position: relative; then its children to position: absolute;? Then you can move them around however you want. If I am understanding you correctly.