How to position buttons in css without this happening?

Question

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

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

Answer 3

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