如何提取Bootstrap卡片动画属性？新手遇层级覆盖问题求助

Hey there! Let's tackle this problem step by step—first, we'll extract the exact sliding card properties you need, then fix the navigation overlap that's giving you trouble.

1. Extract the Core Sliding Card Properties #

You don't need to copy the entire snippet—just these key CSS rules and HTML structure to get the horizontal slide animation working without extra conflicting code:

Core CSS for Sliding Animation #

/* Container to clip the sliding card (hides overflow during animation) */
.card-slider-wrapper {
  overflow: hidden;
  position: relative;
}

/* The card itself with smooth slide transition */
.slide-card {
  transition: transform 0.3s ease-in-out;
  transform: translateX(0);
  position: relative;
  z-index: 1; /* Keep this lower than your navigation's z-index */
}

/* Hover trigger for the left-slide effect */
.card-slider-wrapper:hover .slide-card {
  transform: translateX(-12px); /* Adjust this value for more/less slide distance */
}

/* Optional: Match Bootstrap's default card styling */
.slide-card {
  background-color: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding: 1.5rem;
}

HTML Structure for the Sliding Card #

<!-- Wrap the card in the clipping container -->
<div class="card-slider-wrapper">
  <div class="slide-card">
    <div class="card-body">
      <h5 class="card-title">Your Card Title</h5>
      <p class="card-text">Your card content goes here—this will slide left on hover!</p>
      <a href="#" class="btn btn-primary">Action Button</a>
    </div>
  </div>
</div>

This gives you the exact horizontal slide animation without any unnecessary code that might clash with your existing layout.

2. Fix the Navigation Overlap Problem #

You mentioned adjusting the navigation's z-index didn't work—here's the key: z-index only affects elements with a non-static position (i.e., relative, fixed, sticky, or absolute). If your navigation was using the default static position, changing z-index does nothing at all.

Fix it with this CSS for your top navigation (adjust the class name to match your code):

/* Update this class name to match your navigation's class */
.top-navigation {
  position: sticky; /* Use `fixed` instead if you want it permanently stuck at the top */
  top: 0; /* Required for sticky/fixed positioning to work */
  z-index: 1000; /* Make this higher than the slide card's z-index (we set that to 1) */
  background-color: #fff; /* Add a background to prevent card content from showing through */
  width: 100%; /* Ensure it spans the full viewport width if needed */
}

Why This Works: #

• position: sticky keeps the navigation anchored at the top of the viewport when scrolling (use fixed for permanent fixed positioning).
• z-index: 1000 guarantees the navigation sits above the slide card (since the card has a lower z-index: 1).
• A solid background color prevents the card's content from peeking through the navigation.

Final Quick Checks #

• Only include the sliding card CSS/HTML above in your project—avoid copying the full snippet to prevent style conflicts.
• Double-check that no other elements in your code have a higher z-index than your navigation (this could still cause overlap).

内容的提问来源于stack exchange，提问作者Jeeva Bharathi