How can I fix the width and height of my animated background blocks, so that my sudoku square inputs-CodePudding

Link to the project on jsfiddle: https://jsfiddle.net/CGlinka95/fe3a0Lvu/7/

HTML:

Lines 31-42 in the HTML markup are what's being used to render the animated blocks in the background.

<ul >
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

The flex-container on line 8 houses the rest of the application content, except the h1.

CSS: I have narrowed down the issue to 4 of the properties that I have applied to the blocks class.

The four lines in question are 92, 93, 94, and 95.

.blocks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

When I delete those four lines of code, eg.:

.blocks {
    position: absolute;
    overflow: hidden;
}

the inputs function as normal again, but the animated blocks in the background disappear.

Ultimately, I would like to figure out a way to keep the animated background and still have functional inputs.

This is a personal project of mine that I've been working on for quite some time now, and this is the first real roadblock that I've hit that I can't seem to figure out on my own. Any help, guidance, or advice would be greatly appreciated. This is all just plain HTML and CSS, with no react or CSS libraries. I have JavaScript and a backend for the functionality of the application itself, but they are not relevant to the issue, as far as I know; it should purely just be a layout problem.

Furthermore, if there are any issues with the link or you require any additional information, let me know, and I will provide them asap.

What I've tried so far:

I've tried repositioning the flex-container content with position: absolute over top of the background, but the inputs still don't function.
I've tried deleting the entire .blocks section of CSS code and leaving the .blocks li section in. For some reason, the inputs function like normal again, and the background is still animated, but the entire webpage itself continuously scrolls down and jitters from time to time. This is the closest I've gotten to solving the problem, but it's not a fix that I'm happy with or know how to improve upon.
I'll try to keep this updated as I work on the problem.

Thanks again!

CodePudding user response：

Within .blocks add z-index: -1; and it should be able to fix your problem, as your problem is just that the ul element with the class of blocks is for some reason moving in front of the inputs, so I believe that changing the z-index to be under the inputs will work, as setting the z-index to -1 would set ul element to the under the inputs.

I also did test it if it would work with your code and my test results were that it worked.