How can I properly use z-index in my webpage design?

Store Design
1

I need to add a video on the main page of the website, and a enter button on top of it, but I cannot make z-index to work. The video is working etc but I need to make the “enter” button to be on the top of everything
2

Hello @Loftop

It’s GemPages support team and glad to support you today.

I edited it a bit, you can try again:


  
      
      

        
          

[ENTER]

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

To make the “enter” button appear on top of the video, you can try giving the button a higher z-index value than the video. The z-index property specifies the stack order of an element, with a higher value meaning that the element will be closer to the top of the stack and appear on top of other elements with lower z-index values.

Here is an example of how you can set the z-index for the button:

.enter-button {
  text-decoration: none;
  z-index: 1;  /* set a higher z-index value for the button */
}

video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;  /* set a lower z-index value for the video */
}

This should make the “enter” button appear on top of the video. You may also want to adjust the position of the button using the position property, such as setting it to absolute and specifying the top, left, right, and/or bottom values. This will allow you to position the button exactly where you want it to appear on the page.

I hope this helps! Let me know if you have any other questions or need further assistance.