0

Im making an ecommerce simulation for a course im taking and after succesfully creating a featured section with cards im having some trouble when it comes to scrolling. I have my navbar position set to sticky and when I scroll down the cards overlap on top of it, if someone could point out how to fix this or what the problem is id be very grateful. Ill leave my code below.

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Libros leidos</title>
 <script src="https://kit.fontawesome.com/87b9d53f02.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>

<body>
<!--navbar-->
 <nav class="navbar navbar-expand-lg py-3">
  <div class="container">
    <img src="img/logo.png" class="logo">

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse">
      <ul id="navbar"  class="navbar-nav ms-auto" >
        <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="#shop" class="nav-link">Tienda</a></li>
        <li class="nav-item"><a href="#rentals" class="nav-link">Alquiler</a></li>
      </ul>
    </div>
  </div>
 </nav>

 <!--header-->
<section class="header p-5 text-center text-sm-start">
  <div class="container">
   <div class="d-sm-flex align-items-center justify-content-between ">
    <div>
      <h4 class="py-2">¿Buscas nuevas historias que leer?</h4>
      <h2>Lee un libro leido</h2>
      <h6 class="py-4">Encuentralo en nuestra coleccion de libros de segunda</h6>
      <button class="explr btn-lg text-center">Explora</button>
    </div>
    <img class="img-fluid d-none d-sm-block" src="img/bookrow.png" alt="">
   </div>
  </div>
</section>

<!--featured-->

<section class="feature p-5">
  <h2 class="text-center">Recomendaciones de la semana</h2>
  <h4 class="text-center py-3">Esta semana nuestras recomendaciones giran alrededor de autores latinoamericanos</h4>
  <div class="row text-center g-4">
    <div class="col-sm">
      <div class="card" style="width: 18rem;">
        <img src="img/books/linro1.webp" alt="foto portada del libro" class="card-img-top">
        <div class="card-body">
          <h3 class="card-title">Pedro Paramo - Juan Rulfo</h3>
        </div>
      </div>
    </div>
    <div class="col-sm">
      <div class="card" style="width: 18rem;">
        <img src="img/books/libro3.webp" alt="foto portada del libro" class="card-img-top">
        <div class="card-body">
          <h3 class="card-title">La Fiesta Del Chivo - Mario Vargas Llosa</h3>
        </div>
      </div>
    </div>
    <div class="col-sm">
      <div class="card" style="width: 18rem;">
        <img src="img/books/libro4.webp" alt="foto portada del libro" class="card-img-top">
        <div class="card-body">
          <h3 class="card-title">Rayuela - Julio Cortázar</h3>
        </div>
      </div>
    </div>
    <div class="col-sm">
      <div class="card" style="width: 18rem;">
        <img src="img/books/libro5.webp" alt="foto portada del libro" class="card-img-top">
        <div class="card-body">
          <h3 class="card-title">María - Jorge Isaacs</h3>
        </div>
      </div>
    </div>
  </div>
</section>
Elisa Correa
  • 3
  • 2

1 Answers1

0

I can't replicate your scenario without your CSS but it sounds like the z-index is involved - The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

you can read more about z-index here - https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Yanay
  • 49
  • 5