How to position buttons in css without this happening? [duplicate] - html

Question

This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
Closed 1 year ago.
Here is the CSS and HTML code, the problem is told below.
* {
box-sizing: border-box;
font-family: Georgia, 'Times New Roman', Times, serif;
}
body {
margin: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.topnav {
overflow: hidden;
background-color: #F5CB5C;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
.topnav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
.topnav a {
color: #242423;
text-align: center;
text-decoration: none;
}
.topnav li:hover {
background-color: #E8EDDF;
color: black;
}
.topnav li:active {
background-color: #E8EDDF;
color: black;
}
/* ITEM ABOVE DOES NOT WORK, FIX ASAP! */
.content {
background-color: #242423;
padding: 10px;
color: #E8EDDF;
}
.footer {
background-color: #F5CB5C;
padding: 10px;
color: #242423;
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 20em;
border-radius: 10px;
border-color: #FFFFFF;
max-width: 100%;
height: auto;
object-fit: cover;
margin: 1em;
}
.card-button {
background-color: #ddd;
position: relative;
border: none;
color: black;
padding: .5em 1em;
text-align: center;
text-decoration: none;
float: right;
left: .5em;
bottom: .5em;
cursor: pointer;
border-radius: 16px;
font-size: 16px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
.card img {
border-radius: 10px 10px 0 0;
}
.text-center {
text-align: center;
}
.center {
right: 50%;
}
.title {
margin-top: 2em;
text-align: center;
}
.grid-gallery {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.spacer {
width: 100%;
height: 2em;
}
and here is HTML,
<div class="card">
<img src="https://d3vjn2zm46gms2.cloudfront.net/blogs/2016/05/27005442/Roman-cup_w1280px_h720px.png" alt="Silver Cup" style="width:100%">
<div class="container">
<h4><b>Roman Silver Cup</b></h4>
<button class="card-button">Buy Now</button>
<p>$89.99</p>
</div>
</div>
and here is the problem the buttons are showing over the fixed navigation bar. Can anyone explain why?

Answer 1

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

Answer 2

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;.

Answer 3

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;
}