Question 46150 in CSS Question posted in
Some basic documentation can be found here.

How can we deal with layers in Tailwind CSS

This is a landing page
Landing Page Website Raact.

When I scroll down my slider came on front of navbar which is displayed in the bottom image
Error in this Part. So please help me to out to put slider in the back of navbar.

I want the slider to be below the navbar on scroll on on the above of it. I have kept the navbar fixed.

Tags:

2

Answers


  1. 0

    If you are using position: fixed with an HTML structure something like this…

    <body>
 <header style="position: fixed"/>
 <main> 
   <!-- rest of your scrollable content> 
 </main>
</body>

    You can just swap the order of your header and main elements:

    <body>
 <main> 
   <!-- rest of your scrollable content> 
 </main>
 <header style="position: fixed"/>
</body>

    Since the <header> is now later in the DOM structure, it will inherently have a higher z-index, and so will appear on top of the <main> content. And since you are using position: fixed, the location of the element on the page won’t really change.

    Login or Signup to reply.
  2. 0

    Give a higher z-index for your header than the slider in your CSS file.
    e.g. z-index: 999;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search