Question 256354 in Html Question posted in
Some basic documentation can be found here.

Html – Use Display Fixed

I can’t add style display:fixed to my header div!
When I use that, my div is hidden, and I can’t, it sees!

My HTML codes :

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="/dist/output.css" />
    <title>Project38</title>
  </head>
  <body class="bg-zinc-50">
    <div class="w-full p-2 h-32 bg-zinc-600 block fixed">
      <img
        class="absolute right-1 mr-2 mt-1 block"
        src="../pictures/logo/icons8-javascript-96.png"
        alt="logo"
      />

      <ul class="flex flex-row top-10 absolute">
        <li class="mx-8 text-2.5xl cursor-pointer text-white">Home</li>
        <li class="mx-8 text-2.5xl cursor-pointer text-white">Docs</li>
        <li class="mx-8 text-2.5xl cursor-pointer text-white">Products</li>
        <li class="mx-8 text-2.5xl cursor-pointer text-white">Blog</li>
      </ul>
    </div>

    <div class="flex justify-center">
      <img
        class="blur-md"
        src="../pictures/computer-program-coding-screen.jpg"
        alt="Background"
      />
      <h1 class="absolute top-[700px] text-white text-7xl">
        Welcome To Javascript Home
      </h1>
    </div>
  </body>
  <script src="script.js"></script>
</html>

I am using Tailwind CSS, and I added fixed to my class, but that don’t work!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <div class="w-full p-2 h-32 bg-zinc-600 block fixed top-0 z-50">

  2. 0

    display has no fixed value.

    you need to use position: fixed;

    if still not working, try to add top-0 left-0 classes to header div

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

Back To Top
Search