CodePudding user response：
I would look into the CSS z-index property, which allows you to specify that some item (such as the top nav bar) should always be above other items (or that other items should be below the top nav bar).
https://www.w3schools.com/cssref/pr_pos_z-index.asp
CodePudding user response：
I think you're searching for z-index.
It allows you to set the z-order of a positioned element (meaning that you need to provide a position to your element otherwise it won't work).
You can find more information here.
So in your case, you should add something like z-index: 999;.
CodePudding user response：
This is happening because your button has position: relative; property. Use z-index property. Add z-index: 1000; to your class .topnav. So that navbar stays at top of all.
.topnav {
// other
z-index: 1000;
}
Or add z-index: -1; to your .card-button class.
.card-button {
// other
z-index: -1;
}
