El artículo del carrusel no se desplaza bajo la barra de navegación -- javascript campo con html campo con css camp Relacionados El problema

Carousel item dont scroll under nav bar


0
vote

problema

Español

Soy nuevo en HTML y CSS, así que tal vez mi explicación del problema no puede ser precisa, pero haré todo lo posible para que sea comprensible.

Entonces, el problema es que tengo una barra de título y luego una barra de navegación debajo. En la barra de navegación, tengo enlaces a las páginas que nombran en el año 2021, 2020, 2019, 2018 ...

Cuando desplazo de la página hacia abajo en las palas de NavBar en la parte superior de la página, pero el problema es que hay algunos contenidos que simplemente no se desplazan debajo de la barra de navegación. Entonces, el contenido se superpone a la barra de navegación que dificulta la vista de la barra de navegación.

Estoy proporcionando la imagen y el código a continuación.

Página: Página

El contenido del carrusel superpuesto con la barra de navegación: El contenido del carrusel se superpone en la parte superior de NavBAR

  <style>     /* Make the image fully responsive */     .nav-link{         font-size: 35px;         font-weight: 500;         text-align: center;     }     .nav-item{         width: 150px;     }     .navbar-nav>.active>a {          background-color: #eeb03d;          color: black;      }     .content {     padding: 16px;     }     .sticky {     position: sticky;     top: 0;     width: 100%;     }     .sticky + .content {     padding-top: 60px;     }     .card{         padding: 7px;     }     .carousel-inner nav{       width: 100%;       height: 66px;     }     .carousel-control-prev-icon,     .carousel-control-next-icon {         height: 50px;         width: 10%;                  /* outline: black;         background-size: 100%, 100%;         border-radius: 50%;         border: 1px solid black; */         background-color:darkgray;     }      /* .carousel-next-icon:after     {     content: '>';     font-size: 55px;     color:whitesmoke;     background-color: blue;     }      .carousel-prev-icon:after {     content: '<';     font-size: 55px;     color:whitesmoke;     background-color: blue;     } */      .carousel-control-prev {     margin-left: -10px;     bottom: 0%;     }      .carousel-control-next {     margin-right: -10px;     bottom: 0%;     }  </style>  <section class="page">         <div class="titlebar">             <div class="pagetitle wow fadeInLeft"><h1>Print Media (English)</h1></div>             <!--<div class="pagetitle wow fadeInLeft"><h1>Glove Enquiry Form</h1></div>-->             <div id="breadcum" class="wow fadeInRight"><a href="http://www.topglove.com/">Print Media (English)</a>  |  <a href="#">Print Media (Cantonise)</a> | <a href="#">Print Media (Tamil)</a> | <a href="#">Electronic Media</a></div>         </div>                     <div id="demo" class="carousel slide" data-interval="false" >                          <!-- The slideshow -->             <div class="carousel-inner ">               <div class="carousel-item active">                 <nav class="navbar navbar-expand-sm bg-light">                   <ul class="navbar-nav">                     <li class="nav-item active" >                         <a class="nav-link" href="#">2021</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2020</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2019</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2018</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2017</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2016</a>                     </li>                   </ul>                 </nav>               </div>               <div class="carousel-item">                 <nav class="navbar navbar-expand-sm bg-light ">                   <ul class="navbar-nav">                     <li class="nav-item">                       <a class="nav-link" href="#">2015</a>                     </li>                     <li class="nav-item">                       <a class="nav-link" href="#">2014</a>                     </li>                   </ul>                 </nav>               </div>             </div>                         <a class="carousel-control-next" href="#demo" data-slide="prev" style="position: absolute; right: 10%;">                 <!-- <span class="carousel-prev-icon"></span> -->                 <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: blue;"></span>               </a>             <a class="carousel-control-next" href="#demo" data-slide="next" style="position: absolute; right: 0%; ">                 <!-- <span class="carousel-next-icon"></span> -->                 <span class="carousel-control-next-icon" aria-hidden="true" style="background-color: blue;"></span>               </a>         </div>                  <div class="search-container" style="background: white; padding-left: 10px; width: 30%;">             <form action="/action_page.php">               <input type="text" placeholder="Search.." name="search" style="width: 85%;">               <button type="submit"><i class="fa fa-search"></i></button>             </form>         </div>                  <h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> November News </h3>                  <div id="NovCarousel" class="carousel slide" data-ride="carousel">         <div class="carousel-inner" >             <div class="carousel-item active">             <div class="container">                     <div class="row">                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>                 <div class="carousel-item">                     <div class="container">                             <div class="row">                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             <a class="carousel-control-prev" href="#NovCarousel" role="button" data-slide="prev">                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>                 <span class="sr-only">Previous</span>                 </a>             <a class="carousel-control-next" href="#NovCarousel" role="button" data-slide="next">                 <span class="carousel-control-next-icon" aria-hidden="true"></span>                 <span class="sr-only">Next</span>                 </a>         </div>          <h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> October News </h3>                  <div id="OctCarousel" class="carousel slide" data-ride="carousel">         <div class="carousel-inner" >             <div class="carousel-item active">             <div class="container">                     <div class="row">                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>                                <script>      $(document).ready(function () {           $('ul.navbar-nav > li')                  .click(function (e) {              $('ul.navbar-nav > li')                  .removeClass('active');              $(this).addClass('active');          });      });       window.onscroll = function() {myFunction()};     var navbar = document.getElementById("demo");     var sticky = navbar.offsetTop;     function myFunction() {     if (window.pageYOffset >= sticky) {         navbar.classList.add("sticky")     } else {         navbar.classList.remove("sticky");     }     } </script>    

espera que alguien pueda ayudarme con esto, gracias.

Original en ingles

I'm new to HTML and CSS, so maybe my explanation of the problem may no be accurate but I will try my best to make it understandable.

So the problem is I have a title bar and then a navbar below it. In the navbar, I have links to the pages which I name by the year 2021, 2020, 2019, 2018...

When I scroll the page down the navbar sticks at top of the page, but the problem is there are some contents that just don't scroll below the navbar. So the content overlaps the navbar hindering the view of the navbar.

I'm providing the image and code below.

Page: Page

The carousel content overlapping with the navbar: the carousel content overlap on top of navbar

<style>     /* Make the image fully responsive */     .nav-link{         font-size: 35px;         font-weight: 500;         text-align: center;     }     .nav-item{         width: 150px;     }     .navbar-nav>.active>a {          background-color: #eeb03d;          color: black;      }     .content {     padding: 16px;     }     .sticky {     position: sticky;     top: 0;     width: 100%;     }     .sticky + .content {     padding-top: 60px;     }     .card{         padding: 7px;     }     .carousel-inner nav{       width: 100%;       height: 66px;     }     .carousel-control-prev-icon,     .carousel-control-next-icon {         height: 50px;         width: 10%;                  /* outline: black;         background-size: 100%, 100%;         border-radius: 50%;         border: 1px solid black; */         background-color:darkgray;     }      /* .carousel-next-icon:after     {     content: '>';     font-size: 55px;     color:whitesmoke;     background-color: blue;     }      .carousel-prev-icon:after {     content: '<';     font-size: 55px;     color:whitesmoke;     background-color: blue;     } */      .carousel-control-prev {     margin-left: -10px;     bottom: 0%;     }      .carousel-control-next {     margin-right: -10px;     bottom: 0%;     }  </style>  <section class="page">         <div class="titlebar">             <div class="pagetitle wow fadeInLeft"><h1>Print Media (English)</h1></div>             <!--<div class="pagetitle wow fadeInLeft"><h1>Glove Enquiry Form</h1></div>-->             <div id="breadcum" class="wow fadeInRight"><a href="http://www.topglove.com/">Print Media (English)</a>  |  <a href="#">Print Media (Cantonise)</a> | <a href="#">Print Media (Tamil)</a> | <a href="#">Electronic Media</a></div>         </div>                     <div id="demo" class="carousel slide" data-interval="false" >                          <!-- The slideshow -->             <div class="carousel-inner ">               <div class="carousel-item active">                 <nav class="navbar navbar-expand-sm bg-light">                   <ul class="navbar-nav">                     <li class="nav-item active" >                         <a class="nav-link" href="#">2021</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2020</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2019</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2018</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2017</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2016</a>                     </li>                   </ul>                 </nav>               </div>               <div class="carousel-item">                 <nav class="navbar navbar-expand-sm bg-light ">                   <ul class="navbar-nav">                     <li class="nav-item">                       <a class="nav-link" href="#">2015</a>                     </li>                     <li class="nav-item">                       <a class="nav-link" href="#">2014</a>                     </li>                   </ul>                 </nav>               </div>             </div>                         <a class="carousel-control-next" href="#demo" data-slide="prev" style="position: absolute; right: 10%;">                 <!-- <span class="carousel-prev-icon"></span> -->                 <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: blue;"></span>               </a>             <a class="carousel-control-next" href="#demo" data-slide="next" style="position: absolute; right: 0%; ">                 <!-- <span class="carousel-next-icon"></span> -->                 <span class="carousel-control-next-icon" aria-hidden="true" style="background-color: blue;"></span>               </a>         </div>                  <div class="search-container" style="background: white; padding-left: 10px; width: 30%;">             <form action="/action_page.php">               <input type="text" placeholder="Search.." name="search" style="width: 85%;">               <button type="submit"><i class="fa fa-search"></i></button>             </form>         </div>                  <h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> November News </h3>                  <div id="NovCarousel" class="carousel slide" data-ride="carousel">         <div class="carousel-inner" >             <div class="carousel-item active">             <div class="container">                     <div class="row">                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>                 <div class="carousel-item">                     <div class="container">                             <div class="row">                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             <a class="carousel-control-prev" href="#NovCarousel" role="button" data-slide="prev">                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>                 <span class="sr-only">Previous</span>                 </a>             <a class="carousel-control-next" href="#NovCarousel" role="button" data-slide="next">                 <span class="carousel-control-next-icon" aria-hidden="true"></span>                 <span class="sr-only">Next</span>                 </a>         </div>          <h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> October News </h3>                  <div id="OctCarousel" class="carousel slide" data-ride="carousel">         <div class="carousel-inner" >             <div class="carousel-item active">             <div class="container">                     <div class="row">                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>                                <script>      $(document).ready(function () {           $('ul.navbar-nav > li')                  .click(function (e) {              $('ul.navbar-nav > li')                  .removeClass('active');              $(this).addClass('active');          });      });       window.onscroll = function() {myFunction()};     var navbar = document.getElementById("demo");     var sticky = navbar.offsetTop;     function myFunction() {     if (window.pageYOffset >= sticky) {         navbar.classList.add("sticky")     } else {         navbar.classList.remove("sticky");     }     } </script>  

Hopes anyone can help me with this, thank you.

        

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

a z-index en id = "Demo" resolverá su problema. Compruebe mi código a continuación -

  $for_member_group6  
 

A z-index on id="demo" will solve your problem. Check my code below-

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">      <style>         /* Make the image fully responsive */     .nav-link{         font-size: 35px;         font-weight: 500;         text-align: center;     }     .nav-item{         width: 150px;     }     .navbar-nav>.active>a {          background-color: #eeb03d;          color: black;      }     .content {     padding: 16px;     }     .sticky {     position: sticky;     top: 0;     width: 100%;     }     .sticky + .content {     padding-top: 60px;     }     .card{         padding: 7px;     }     .carousel-inner nav{       width: 100%;       height: 66px;     }     .carousel-control-prev-icon,     .carousel-control-next-icon {         height: 50px;         width: 10%;                  /* outline: black;         background-size: 100%, 100%;         border-radius: 50%;         border: 1px solid black; */         background-color:darkgray;     }      /* .carousel-next-icon:after     {     content: '>';     font-size: 55px;     color:whitesmoke;     background-color: blue;     }      .carousel-prev-icon:after {     content: '<';     font-size: 55px;     color:whitesmoke;     background-color: blue;     } */      .carousel-control-prev {     margin-left: -10px;     bottom: 0%;     }      .carousel-control-next {     margin-right: -10px;     bottom: 0%;     }     #demo{         z-index: 9999;     }      </style> </head> <body>     <section class="page">         <div class="titlebar">             <div class="pagetitle wow fadeInLeft"><h1>Print Media (English)</h1></div>             <!--<div class="pagetitle wow fadeInLeft"><h1>Glove Enquiry Form</h1></div>-->             <div id="breadcum" class="wow fadeInRight"><a href="http://www.topglove.com/">Print Media (English)</a>  |  <a href="#">Print Media (Cantonise)</a> | <a href="#">Print Media (Tamil)</a> | <a href="#">Electronic Media</a></div>         </div>                     <div id="demo" class="carousel slide" data-interval="false" >                          <!-- The slideshow -->             <div class="carousel-inner ">               <div class="carousel-item active">                 <nav class="navbar navbar-expand-sm bg-light">                   <ul class="navbar-nav">                     <li class="nav-item active" >                         <a class="nav-link" href="#">2021</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2020</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2019</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2018</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2017</a>                     </li>                     <li class="nav-item">                         <a class="nav-link" href="#">2016</a>                     </li>                   </ul>                 </nav>               </div>               <div class="carousel-item">                 <nav class="navbar navbar-expand-sm bg-light ">                   <ul class="navbar-nav">                     <li class="nav-item">                       <a class="nav-link" href="#">2015</a>                     </li>                     <li class="nav-item">                       <a class="nav-link" href="#">2014</a>                     </li>                   </ul>                 </nav>               </div>             </div>                         <a class="carousel-control-next" href="#demo" data-slide="prev" style="position: absolute; right: 10%;">                 <!-- <span class="carousel-prev-icon"></span> -->                 <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: blue;"></span>               </a>             <a class="carousel-control-next" href="#demo" data-slide="next" style="position: absolute; right: 0%; ">                 <!-- <span class="carousel-next-icon"></span> -->                 <span class="carousel-control-next-icon" aria-hidden="true" style="background-color: blue;"></span>               </a>         </div>                  <div class="search-container" style="background: white; padding-left: 10px; width: 30%;">             <form action="/action_page.php">               <input type="text" placeholder="Search.." name="search" style="width: 85%;">               <button type="submit"><i class="fa fa-search"></i></button>             </form>         </div>                  <h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> November News </h3>                  <div id="NovCarousel" class="carousel slide" data-ride="carousel">         <div class="carousel-inner" >             <div class="carousel-item active">             <div class="container">                     <div class="row">                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>                 <div class="carousel-item">                     <div class="container">                             <div class="row">                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                                 <div class="col-md-3">                                     <div class="card mb-4 box-shadow">                                         <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                         <div class="card-img-overlay">                                             <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                         </div>                                         <div class="card-body">                                             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                             <div class="d-flex justify-content-between align-items-center">                                             <!-- <div class="btn-group">                                                 <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                                 <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                             </div> -->                                             <small class="text-muted">9 mins</small>                                             </div>                                         </div>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             <a class="carousel-control-prev" href="#NovCarousel" role="button" data-slide="prev">                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>                 <span class="sr-only">Previous</span>                 </a>             <a class="carousel-control-next" href="#NovCarousel" role="button" data-slide="next">                 <span class="carousel-control-next-icon" aria-hidden="true"></span>                 <span class="sr-only">Next</span>                 </a>         </div>          <h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> October News </h3>                  <div id="OctCarousel" class="carousel slide" data-ride="carousel">         <div class="carousel-inner" >             <div class="carousel-item active">             <div class="container">                     <div class="row">                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                         <div class="col-md-3">                             <div class="card mb-4 box-shadow">                                 <img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">                                 <div class="card-img-overlay">                                     <h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>                                 </div>                                 <div class="card-body">                                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>                                     <div class="d-flex justify-content-between align-items-center">                                     <!-- <div class="btn-group">                                         <button type="button" class="btn btn-sm btn-outline-secondary">View</button>                                         <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>                                     </div> -->                                     <small class="text-muted">9 mins</small>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>                  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>              <script>      $(document).ready(function () {           $('ul.navbar-nav > li')                  .click(function (e) {              $('ul.navbar-nav > li')                  .removeClass('active');              $(this).addClass('active');          });      });       window.onscroll = function() {myFunction()};     var navbar = document.getElementById("demo");     var sticky = navbar.offsetTop;     function myFunction() {     if (window.pageYOffset >= sticky) {         navbar.classList.add("sticky")     } else {         navbar.classList.remove("sticky");     }     } </script>  </body> </html>
 
 
 
 

Relacionados problema

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos