时间戳

首页 > 解决方案 > 如何在不发生这种情况的情况下在 CSS 中定位按钮？

html - 如何在不发生这种情况的情况下在 CSS 中定位按钮？

问题描述

这是CSS和HTML代码，问题如下。

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

这是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>

这是按钮在固定导航栏上显示的问题。谁能解释为什么？

在此处输入图像描述

标签： htmlcssbutton

解决方案

我会查看 CSS z-index 属性，它允许您指定某些项目（例如顶部导航栏）应始终位于其他项目上方（或其他项目应位于顶部导航栏下方）。 https://www.w3schools.com/cssref/pr_pos_z-index.asp

推荐阅读