Why is my HTML element transparent?

Coding Help
1

The “modal” element in my chat app is supposed to have an opaque background and be on top of the rest of the elements on the page. It is also supposed to cover the whole page when it is not hidden. However, it is transparent and does not cover the top of the page. Here is an image:

image
image1792×918 15.7 KB

As you can see, it does not cover the top of the page (notice the background change), and other elements are visible under it. Why is this so? Is this an error in my CSS? I have tried setting the opacity to 1, but that doesn’t seem to work.

Project URL:

https://chat--element1010.glitch.me

2

The div element has for default: position: static;
Static positioning doesn’t allow z-index.

Adding the following code to #modal will fix it.

position: relative;
1 Like
3

Thanks. Now what about why it’s not covering the whole page?

4

The element is shifted by the padding of the body.

To fix this, you could try adding

top: 0px;
left: 0px;

to the code, and changing position: relative to position: absolute

5

If you don’t know what the different position attributes are:

  • Relative:
    • Offsets the element from it’s current position / status.
    • Adding left: 5px shifts the element 5 pixels to the right of it’s current position.
  • Static:
    • Fixed positioning.
    • left, right, top, bottom, z-index and a few other’s don’t work.
  • Absolute:
    • Positions the element relative to it’s closest positioned ancestor.
  • Fixed:
    • Positions the element relative to the screen.
    • Does not scroll with the document.

See more.

1 Like
6

Also, maybe set the #chat element to have z-index: -1. It makes the button clicking a little nicer.

7

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.