Creating a movable character on top of CSS grid-CodePudding

I've created a CSS grid with 8 rows and 3 columns for a small 2D game. I want to create a small "chicken" character that is able to be controlled by keystrokes using CSS properties like left and top, but I'm not sure how to add it on top of my existing HTML.

At first, I tried to remove the grid attributes from the chicken class, and added position: absolute to override the grid positioning for the chicken character. But then I found out that it caused the character to not take up any space. Not sure what else to try.

body{
margin:0;
}
.game_frame{
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #00162b;
}

.game_screen{
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
position: absolute;
width: 90%;
height: 90%;
background: black;
}

.scoreboard{
grid-row-start: 1;
grid-column-start: 1;
color: white;
font-family: verdana;
font-size: 30px;
padding-left: 10px;
padding-top: 10px;
text-shadow: 1px 1px 10px #ccc;
}

.timer{
grid-row-start: 1;
grid-column-start: 2;
padding-left: 45%;
color: white;
font-family: verdana;
font-size: 25px;
padding-top: 30px;
text-shadow: 1px 1px 20px #fff, 1px 1px 20px #ccc;
}

.solid_line{
height: 3%;
width: 100%;
background-color: white;
}

.dotted_line{
background-image: linear-gradient(to right, white 0%, white 90%, transparent 40%);
background-size: 36px 2px;
background-repeat: repeat-x;
height: 3%;
width: 100%;
}

.chicken{
grid-row-start: 8;
grid-column-start: 2;
background-image: url("chicken_texture.png");
background-repeat: no-repeat;
width: 20%;
justify-self: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Traffic Evasion </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div >
    <div >
        <div >
            Score: 0
        </div>
        <div >
            90
        </div>
        <div  style="grid-row-start:2; grid-column-start:1; grid-column-end:4"> </div>
        <div  style="grid-row-start:3; grid-column-start:1; grid-column-end:4"> </div>
        <div  style="grid-row-start:4; grid-column-start:1; grid-column-end:4"> </div>
        <div  style="grid-row-start:5; grid-column-start:1; grid-column-end:4"> </div>
        <div  style="grid-row-start:6; grid-column-start:1; grid-column-end:4"> </div>
        <div  style="grid-row-start:7; grid-column-start:1; grid-column-end:4"> </div>
        <div  style="grid-row-start:8; grid-column-start:1; grid-column-end:4"> </div>
        <div > </div>
    </div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script>
</body>
</html>

CodePudding user response：

In order to stop your chicken from disappearing and place it on top of your grid, please use the z-index property in order to put your chicken "on a higher level" than your grid.

/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

The higher the z-index of a page element (like a div), the less likely it is to be covered by other elements. So a div tag with a z-index of 3 will be layered over a div tag with an index less than 3.

I would encourage you to play with the example in the try it section of the mozilla link as it dynamically shows how the z-index works when you click each button in the left column of that example.