0

What is the problem that comes next if I use the overlay Without position absolute and top left right bottom ; 0 ?

<div class="home">                                                       
  <div class="overlay"></div>
</div>

.home {
  background: url(../imgs/background/background1.webp) ;
  background-size:cover ;
  width: 100vw;
  height: 100vh;
  position: relative;
}
.overlay {
  background-color: rgba (0, 0, 0,0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

I just used

.overlay {
  background: rgba (0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}

image here

The same result can be obtained now .

Source. W3schools How TO - Overlay

Sido.17
  • 1
  • 2
  • 3
    It's not clear what you are asking - what do you mean by "effect" and "comes next"? – Johannes Sep 01 '20 at 16:10
  • Try adding some content to your page and you will see that the effect is very different if you omit `position: absolute` or `fixed`: https://jsfiddle.net/c5haqxmL/1/ – Turnip Sep 01 '20 at 16:15
  • Why do we use position absolute and top left right bottom 0 if we only use width: 100%; and height: 100%; it gives the same result @Johannes – Sido.17 Sep 01 '20 at 16:46
  • if you don't set top/left/right/bottom you will fail into the *static position*. In some cases, it's the same as defining top/left but not always (read the duplicate for more details) – Temani Afif Sep 01 '20 at 19:25

0 Answers0