0

I need to display my containers on an extra layer of div. If I set position: absolute, the button on "container-blog" cannot be pressed.

body {
  background-image     : linear-gradient ( 90deg               ,
                          rgba(0,0,0,0.47102591036414565) 0%   ,
                          rgba(1,1,1,0.4682247899159664) 100%  ) ,
                          url(images/main2.png)                ;
  background-repeat    : no-repeat;
  background-attachment: fixed; 
  background-size      : 100% 100%;
  z-index              : 1;
  user-select          : none;
  overflow-x           : hidden;
  scroll-behavior      : smooth;
  font-family          : "Jacques Francois", serif;
  }
.whole-page{
  border-top           : 2px;
  border               : black;
  top                  : 840px;
  width                : 101%;
  height               : 2000px;
  position             : absolute;
  z-index              : 30;
  transition           : all 120s;  
  background           : rgb(82, 82, 82);
  background           : radial-gradient(circle, rgb(183, 183, 183) 0%, rgb(85, 85, 85)100%);
  margin-left          : 0;
  margin-right         : 0;
  }
.texture{
  opacity              : 10%;
  width                : 100%;
  height               : 100%;
  background-image     : url(images/texture5.png);
  background-size      : cover;
  }
.blog{
  margin-bottom        : 10px;
  height               : 20%;
  width                : 100%;
  z-index              : 40;
  top                  : 2%;
  align-self           : start;
  justify-self         : start;
  position             : absolute;
  }
.container-blog{
  width                : 29%;
  height               : 80%;
  background-color     : aliceblue;
  margin-left          : 3%;
  display              : inline-block;
  background-image     : url(images/container2.png);
  background-size      : cover;
  filter               : grayscale(100%);
  border               : 2px solid black;
  box-shadow           : 10px 10px 29px -4px rgba(0,0,0,0.75);
  transition           : all 0.3s;
  }
.container-blog2{
  width                : 29%;
  height               : 80%;
  background-color     : aliceblue;
  margin-left          : 3%;
  display              : inline-block;
  background-image     : url(images/container2.png);
  background-size      : cover;
  filter               : grayscale(100%);
  border               : 2px solid black;
  box-shadow           : 10px 10px 29px -4px rgba(0,0,0,0.75);
  transition           : all 0.3s;
  }
.container-blog3{
  width                : 29%;
  height               : 80%;
  background-color     : aliceblue;
  margin-left          : 3%;
  display              : inline-block;
  background-image     : url(images/container2.png);
  background-size      : cover;
  filter               : grayscale(100%);
  border               : 2px solid black;
  box-shadow           : 10px 10px 29px -4px rgba(0,0,0,0.75);
  transition           : all 0.3s;
  }
.blog-span{
  color                : rgb(65, 65, 65);
  top                  : 0;
  text-align           : center;
  font-size            : 60px;
  padding-bottom       : 10px;
  text-shadow          : rgb(0, 0, 0) 2px 2px 3px;
  }
.nadpis{
  font-size            : 40px;
  color                : black;
  font-weight          : 800;
  padding-left         : 10%;
  padding-top          : 5%;
  }
.textus{
  color                : rgb(56, 56, 56);
  padding-left         : 5%;
  font-size            : 25px;
  padding-top          : 2%;
  text-align           : center;
  z-index              : 50;
  }
<div class="whole-page">
  <div class="texture"></div>
  <div class="top"></div>
  <div class="blog">
    <div class="blog-span">Blog Test</div>
    <div class="container-blog">
      <div class="nadpis">Nadpis blog1</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
    </div>
    <div class="container-blog2">
      <div class="nadpis">Nadpis blog2</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
    </div>
    <div class="container-blog3">
      <div class="nadpis">Nadpis blog3</div>
      <div class="textus">Epsum hipsum lepisum elipsum kupsum</div>
      <button>View More</button>
    </div>
  </div>
</div>

If I remove position: aboslute, it works, but the layout breaks.

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Samas111
  • 1
  • 3
  • 2
    Works on my machine. Please supply a minimal reproducible example. – Ruud Helderman Oct 10 '22 at 16:46
  • 1
    If you right-click and `Inspect` does the DOM inspector take you to the `div` or the `button`? The div is likely covering up the button so your click event goes to the div, not the button. This can usually be handled by setting [`pointer-events: none;`](https://developer.mozilla.org/docs/Web/CSS/pointer-events) on the div, or/and raising the z-index of the button. (pointer-events is the more modern approach) – Stephen P Oct 10 '22 at 16:55

0 Answers0