div 粘性位置不起作用 tailwindcss

Question

我在使用 Tailwind CSS。我有两个粘性位置，一个粘性 header 另一个粘性侧边栏。我的粘性 header 工作正常。:

<body>
    <!-- haed -->
    <header class="sticky z-50 top-0 hidden">
        <!-- searchbar -->
        <div class="grid grid-cols-12 p-1 sm:py-3 md:px-16 md:py-12 xl:px-32 xl:pt-24 bg-gray-100">
            <div class="col-span-12 mb-2 lg:col-span-3 ">
                <span id="btnMenu" onclick="toggleButton(); return false">
                    <i class="fal fa-2x fa-bars hover:bg-white"></i>
                </span>
                <span class="mx-2 float-left lg:float-none lg:mx-6">Logo</span>
            </div>
            <div class="col-span-12 lg:col-span-9">
                <span class="w-full h-10 bg-gray-200 cursor-pointer border border-gray-300 text-sm rounded-full flex">
                    <input type="search" name="serch" placeholder="Search..."
                        class="flex-grow px-4 rounded-l-full rounded-r-full text-sm focus:outline-none"> <i
                        class="fas fa-search m-3 mr-5 text-lg text-gray-700 w-4 h-4"> </i> </span>

            </div>
        </div>
        <!-- end searchbar -->
    </header>
    <!-- end head -->

（在上面的代码中隐藏了 class 用于单独测试的第二个粘性位置）但是第二个粘性位置不起作用！继续上面的代码

 <div class="relative h-auto w-auto">

        <!-- sidebar and mainpage -->
        <div class="grid grid-cols-12">
            <!-- sidebar -->
            <div id="backgroundmenu"
                class="hidden z-30 absolute top-0 right-0 h-full w-full bg-black opacity-25  top-0 lg:hidden"></div>
            <!--  background mobile shadow -->

            <div id="rightSidebar"
                class="hidden z-30 absolute right-0 top-0 h-full w-full lg:static lg:block lg:right-auto lg:top-auto col-span-12 sm:col-span-12  md:col-span-4 lg:col-span-3 xl:col-span-2">
                <!-- sidebar items -->
                    <div class="sticky top-0 bg-gray-100 font-light h-full w-1/3 lg:w-auto overflow-y-scroll  lg:overflow-y-hidden">

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo similique adipisci quam pariatur
                            explicabo, assumenda voluptatem saepe, accusamus nostrum optio, rem impedit aliquid.
                            Obcaecati quidem, aut inventore quae cupiditate ex?</p>
                        <a href="#" class="p-5 pr-10 block hover:bg-gray-200 hover:shadow-xs hover:rounded-full">
                            <i class="fal fa-sign-in"></i> Login</a>
                        <a href="#" class="p-5 pr-10 block hover:bg-gray-200 hover:shadow-xs hover:rounded-full">
                            <i class="fal fa-user-plus"></i> Register</a>
                    </div>

                <!-- end sidebar items -->

            </div>

            <!-- end sidebar -->
            <!-- main --> 
               ...

即使 header 被隐藏并且当删除 overflow-y-scroll lg:overflow-y-hidden class 时，粘性侧边栏也不起作用。我不知道为什么

和实时页面：https://codepen.io/djary/pen/QWjYOGX

注册登录物品（容器必须置顶）

Answer 1

您的 rightSidebar 组件有一个 h-full class 使其继承其父组件的高度。所以它永远不会变粘。删除它以解决您的问题。

div 粘性位置不起作用 tailwindcss

a div sticky position not work tailwindcss

html

css

tailwind-css