Background over content-CodePudding

I am building a very simple web page with the purpose of using it later for javascript. It is an image with a button that will perform functions later, however, as soon as I was able to center my background, it overlaps the content and does not let me see it or interact with it.

* {
  box-sizing: border-box;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}

h1 {
  text-align: center;
}

.logo {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <title>Keyless Car</title>
</head>

<body>
  <div >
    <img src="https://via.placeholder.com/2000/0000FF/808080">
  </div>
  <div >
    <img src="https://via.placeholder.com/150/000000/808080">
  </div>
  <div >
    <img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

The idea is of course to be able to visualize all the content. As a side note, the image that I am using to make the button (container) is in png so that it does not stain my background

CodePudding user response：

This is because you have set the position property on .bg to be fixed. Once you do that the div gets fixed on the top left corner and takes the topmost position on the stack order of elements and hence hiding other elements.

Kindly make the following changes to the code and it should work.

* {
    box-sizing: border-box;
}

.bg {
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100%;
    z-index:-1;
}

h1 {
    text-align: center;
}

.logo {
    padding-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    padding-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="estilo.css"> 
    <title>Keyless Car</title>
</head>
<body>
    <div >
        <img src= "https://via.placeholder.com/2000/0000FF/808080">
    </div>
    <div >
        <img src= "https://via.placeholder.com/150/000000/808080">
    </div>
    <div >
        <img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
    </div>  
    <script type="text/javascript" src="script.js"></script>
  

  
  
</body>
  
  
</html>