I have created a panel inside a container class. The panel's CSS is as follows:
.panel {
width: 100%;
background: url(img/launch1.png);
height: 80%;
background-size: cover;
background-position: center;
position: relative;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
}
The container has the following CSS:
.container {
position: absolute;
top: 0;
width: 100%;
left: 0;
margin: auto;
overflow: hidden;
}
However, when I change the position of .panel to relative, it disappears and is no longer visible on the screen. It seems to be placed outside of the monitor's view. I'm not sure what could be causing this issue. Can anyone provide fresh insights or suggestions to help me resolve this problem?