Button is not working when placed on background image-CodePudding

my button wont work when it is placed on this background image this is the html and css i used

.bg-img {
  width: 99.3vw;
  opacity: 45%;
  position: absolute;
  clip: rect(0, 100vw, 650px, 0px);
  height: 850px;
}

.learn {
  margin-left: 550px;
  margin-top: 520px;
  height: 30px;
  width: 120px;
  font-size: 15px;
}

#project {
  margin-top: 600px;
}

<img  src="https://images.unsplash.com/photo-1487611459768-bd414656ea10?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTkwNjcyNg&ixlib=rb-1.2.1&q=85" alt="">

<form action="#project">
  <button type="submit"  formaction="#project">
    Learn more
  </button>
</form>

<h1  id="project">Check out my work</h1>

Button is showing on background image but is not clickable

CodePudding user response：

set the pointer-events to none on the bg img

.bg-img {
  width: 99.3vw;
  opacity: 45%;
  position: absolute;
  clip: rect(0, 100vw, 650px, 0px);
  height: 850px;
  pointer-events: none;
}

Working example:

.bg-img {
  width: 99.3vw;
  opacity: 45%;
  position: absolute;
  clip: rect(0, 100vw, 650px, 0px);
  height: 850px;
  pointer-events: none;
}

.learn {
  margin-left: 550px;
  margin-top: 520px;
  height: 30px;
  width: 120px;
  font-size: 15px;
}

#project {
  margin-top: 600px;
}

<img  src="https://images.unsplash.com/photo-1487611459768-bd414656ea10?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTkwNjcyNg&ixlib=rb-1.2.1&q=85" alt="">

<form action="#project">
  <button type="submit"  formaction="#project">
    Learn more
  </button>
</form>

<h1  id="project">Check out my work</h1>

CodePudding user response：

The reason is img with absolute positioning is covering your button. Just add z-index: -1 to bg-img class.

.bg-img {
  width: 99.3vw;
  opacity: 45%;
  position: absolute;
  z-index: -1;
  clip: rect(0, 100vw, 650px, 0px);
  height: 850px;
}

.learn {
  margin-left: 550px;
  margin-top: 520px;
  height: 30px;
  width: 120px;
  font-size: 15px;
}

#project {
  margin-top: 600px;
}

<img src="https://images.unsplash.com/photo-1487611459768-bd414656ea10?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTkwNjcyNg&ixlib=rb-1.2.1&q=85" alt="" >

<form action="#project">
  <button type="submit"  formaction="#project">
    Learn more
  </button>
</form>

<h1  id="project">Check out my work</h1>

CodePudding user response：

add z-index and position

.learn {
  margin-left: 550px;
  margin-top: 520px;
  height: 30px;
  width: 120px;
  font-size: 15px;
  position: relative 
  z-index: 1;
}

CodePudding user response：

You need to change your markup first. image should go under the button and also need to do some change in css. Try the code below, you will find answer:

body {
    position: relative;
}
.learn {
    height: 30px;
    width: 120px;
    font-size: 15px;
    z-index: 1;
    position: absolute;
    top: 520px;
    left: 520px;
}
.bg-img {
  width: 99.3vw;
  opacity: 45%;
  position: absolute;
  clip: rect(0, 100vw, 650px, 0px);
  height: 850px;
}
#project {
  margin-top: 600px;
}

<body>
<form action="#project">
  <button type="submit"  formaction="#project">
    Learn more
  </button>
</form>
<img  src="https://images.unsplash.com/photo-1487611459768-bd414656ea10?crop=entropy&amp;cs=srgb&amp;fm=jpg&amp;ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MTkwNjcyNg&amp;ixlib=rb-1.2.1&amp;q=85" alt="">

<h1  id="project">Check out my work</h1>
    <script type="text/javascript">
        
    </script>

<div ><div ></div></div>
</body>