为什么按钮与CSS中的图像重叠？

Question

我是网络开发新手，并且在这个问题上停留了很长一段时间。 我希望制作一个表格（在第 2 栏-6 中），顶部有按钮，而不是根据按钮单击更改其下方的内容（可滚动卡片）。 我尝试实现它，但我的卡片和按钮重叠如何解决这个问题，并且重叠使按钮无反应。

<div class="Container">
   <div class="row">
      <div class="col-md-6 ">
         <div > this is the table</div>
      </div>
      <div class="col-md-6 ">
         <div class="container">
            <div >
               <div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
                  <button class="tablink" style="margin-bottom:12px" @click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
               </div>
            </div>
            <div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
               <div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
                  <div class="card mb-6" style="background-color: #050b06;">
                     <div class="row g-0  ">
                        <div class="col-md-6 col-6 w-100 h-100">
                           <img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
                        </div>
                        <div class="col-md-6 col-6">
                           <p class="card-text text-episode" style="text-align: left; color:#fff;">
                              <small class="text-muted">  card</small>
                           </p>
                           <p class="card-text text-start" style="text-align: left;">
                              <small class="text-muted">text</small
                                 >
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

我希望您使用 bootstrap 4 或更高版本，试试这个

<div class="Container">
   <div class="row">
      <div class="col-md-6 ">
         <div > this is the table</div>
      </div>
      <div class="col-md-6 ">
         <div class="row">
            <div class="col-md-12">
               <div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
                  <button class="tablink" style="margin-bottom:12px" @click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
               </div>
            </div>
            <div class="col-md-12">
                <div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
                   <div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
                      <div class="card mb-6" style="background-color: #050b06;">
                         <div class="row g-0  ">
                            <div class="col-md-6 col-6 w-100 h-100">
                               <img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
                            </div>
                            <div class="col-md-6 col-6">
                               <p class="card-text text-episode" style="text-align: left; color:#fff;">
                                  <small class="text-muted">  card</small>
                               </p>
                               <p class="card-text text-start" style="text-align: left;">
                                  <small class="text-muted">text</small
                                     >
                               </p>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 2

当按钮与 CSS 中的图像重叠时，通常是由于布局或定位问题而发生的。以下是一些常见原因和解决方案：

---

1. 定位冲突

• 原因：如果按钮或图像使用绝对、固定或相对定位而没有正确对齐，它们可能会重叠。
• 解决方案：检查按钮和图像的

  position

  属性。确保正确指定

  z-index

  值和位置。

.button {
    position: absolute; /* or relative */
    top: 10px; /* Adjust to place the button correctly */
    left: 20px; /* Adjust based on image location */
    z-index: 10; /* Ensure it stacks correctly */
}

.image {
    position: relative;
    z-index: 1;
}

---

2. 边距和填充使用不当

• 原因：按钮或图像的边距或填充可能会导致意外重叠。
• 解决方案：使用开发人员工具检查布局，以确定间距过多或不足。根据需要调整

  margin

  或

  padding

  。

.button {
    margin: 20px auto; /* Add space to prevent overlap */
}

.image {
    margin-bottom: 30px; /* Create space for the button below */
}

---

3. 浮动元素

• 原因：如果图像或按钮使用

  float

  而没有进行适当的清除，它们可能会重叠。
• 解决方案：使用

  clear: both

  或clearfix来确保正确的布局。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.container {
    display: block;
}

---

4. Flexbox 或网格问题

• 原因：如果

  flexbox

  或

  grid

  布局配置错误，可能会发生重叠。
• 解决方案：确保容器内正确对齐、调整和调整尺寸。

.container {
    display: flex;
    flex-direction: column; /* Or row */
    align-items: center; /* Adjust alignment */
    justify-content: space-between; /* Ensure spacing */
}

.button {
    align-self: center; /* Align button appropriately */
}

---

5. 溢出设置

• 原因：如果父容器有

  overflow: hidden

  或

  overflow: auto

  ，元素可能无法在其中正确定位。
• 解决方案：调整溢出或确保子元素适合容器。

.container {
    overflow: visible; /* Allow content to display properly */
}

---

6. Z 索引不正确

• 原因：Z-index定义了元素的堆栈顺序。如果按钮和图像共享相同的

  z-index

  ，可能会发生重叠。
• 解决方案：根据所需的堆叠顺序为按钮或图像分配更高的

  z-index

  。

.button {
    position: relative;
    z-index: 2; /* Ensure button appears above */
}

.image {
    position: relative;
    z-index: 1; /* Ensure image is behind */
}

---

调试技巧

1. 在浏览器中检查：使用开发人员工具（例如 Chrome DevTools）检查布局并找到确切的问题。
2. 临时边框：为元素添加边框以可视化其大小和位置：

   .button, .image {
       border: 1px solid red; /* Helps in debugging layout issues */
   }
   

3. 简化布局：使用最少的CSS进行测试以隔离问题，然后一一重新引入样式。

如果您需要帮助调试您的特定 CSS，请告诉我！请访问我们https://simranitservices.com/web-development-company-himachal/