Why position sticky is not working in my code?

Question

There's an image and component called TopOptions, I want to make them stick to top of the page. Please let me know what I am doing wrong.

      {!categorySearch && (
        <div className="max-w-2xl mx-auto z-40 relative overflow-x-hidden font-metropolis_semibold">
          <div className="sticky top-0">
            <div className=" z-40 bg-white w-full transition-all">
              <div
                id="logo"
                className={
                  logo
                    ? "px-md mt-10 font-medium"
                    : "px-md mt-10 font-medium animate"
                }
              >
                <div className="overflow-x-hidden ">
                  <img
                    src={settings.logo_intro_image_url}
                    alt={settings.name}
                    className="max-w-full object-contain company-logo"
                    style={{ height: settings.logo_height }}
                    id="company-logo"
                  />
                </div>
              </div>
              <div
                className={`${
                  logo
                    ? "shadow-none border-none"
                    : "border-b-2 border-gray-200"
                }`}
              >
                <TopOptions
                  showOption={showOption}
                  setShowOption={setShowOption}
                  addBorder={logo}
                  outlets={outlets}
                  languageLabels={languageLabels}
                  settings={selectedOutlet.settings}
                />
              </div>
            </div>
            {Object.keys(bannerArray).length === 1 ? (
              <div className="w-full px-md border-b-8 border-banner pb-md">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <>
                        <PosterSlider
                          key={index}
                          image={banner.image}
                          loadingBanners={loadingBanners}
                          isSingle={Object.keys(bannerArray).length === 1}
                        />
                      </>
                    );
                  })}
              </div>
            ) : (
              <div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <PosterSlider
                        key={index}
                        image={banner.image}
                        loadingBanners={loadingBanners}
                        isSingle={Object.keys(bannerArray).length === 1}
                      />
                    );
                  })}
              </div>
            )}
            <div className="flex flex-row justify-between items-center px-md my-25p">
              <p className="font-metropolis_regular text-sm break-words">
                {languageLabels.like_to_order}
              </p>
              <img
                src={Search}
                alt="search"
                onClick={() => setCategorySearch(true)}
              />
            </div>
            <div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
              {categoryList.map((category) => {
                // console.log(category);
                return (
                  <Dishes
                    key={category.category_id}
                    category={category}
                    languageLabels={languageLabels}
                    loading={loadingCategories}
                  />
                );
              })}
            </div>
            <BottomNavigation
              languageLabels={languageLabels}
              isLoyalty={settings.enable_reward_points_functionality}
            />
          </div>
        </div>
      )}

```.sticky``` is ```display: sticky``` and ```.top-0``` is well ```top: 0``` — Chandler Bing, Aug 19 '21 at 06:46

score 1 · Accepted Answer · answered Aug 19 '21 at 06:43

Its because you have overflow-x-hidden in parent . sticky doesn't work if parent overflow is hidden.

{!categorySearch && (
        <div className="max-w-2xl mx-auto z-40 relative  font-metropolis_semibold">
          <div className="sticky top-0">
            <div className=" z-40 bg-white w-full transition-all">
              <div
                id="logo"
                className={
                  logo
                    ? "px-md mt-10 font-medium"
                    : "px-md mt-10 font-medium animate"
                }
              >
                <div className="overflow-x-hidden ">
                  <img
                    src={settings.logo_intro_image_url}
                    alt={settings.name}
                    className="max-w-full object-contain company-logo"
                    style={{ height: settings.logo_height }}
                    id="company-logo"
                  />
                </div>
              </div>
              <div
                className={`${
                  logo
                    ? "shadow-none border-none"
                    : "border-b-2 border-gray-200"
                }`}
              >
                <TopOptions
                  showOption={showOption}
                  setShowOption={setShowOption}
                  addBorder={logo}
                  outlets={outlets}
                  languageLabels={languageLabels}
                  settings={selectedOutlet.settings}
                />
              </div>
            </div>
            {Object.keys(bannerArray).length === 1 ? (
              <div className="w-full px-md border-b-8 border-banner pb-md">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <>
                        <PosterSlider
                          key={index}
                          image={banner.image}
                          loadingBanners={loadingBanners}
                          isSingle={Object.keys(bannerArray).length === 1}
                        />
                      </>
                    );
                  })}
              </div>
            ) : (
              <div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <PosterSlider
                        key={index}
                        image={banner.image}
                        loadingBanners={loadingBanners}
                        isSingle={Object.keys(bannerArray).length === 1}
                      />
                    );
                  })}
              </div>
            )}
            <div className="flex flex-row justify-between items-center px-md my-25p">
              <p className="font-metropolis_regular text-sm break-words">
                {languageLabels.like_to_order}
              </p>
              <img
                src={Search}
                alt="search"
                onClick={() => setCategorySearch(true)}
              />
            </div>
            <div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
              {categoryList.map((category) => {
                // console.log(category);
                return (
                  <Dishes
                    key={category.category_id}
                    category={category}
                    languageLabels={languageLabels}
                    loading={loadingCategories}
                  />
                );
              })}
            </div>
            <BottomNavigation
              languageLabels={languageLabels}
              isLoyalty={settings.enable_reward_points_functionality}
            />
          </div>
        </div>
      )}

Hi, I removed ```overflow``` from the parent but it still not working. any idea why? — Chandler Bing, Aug 19 '21 at 06:47
Thanks mate, you're right. Take a look at my answer. I removed the ```overflow``` from the parent like you said and now I'm using position sticky on the child (the element I want to stick). It's working. — Chandler Bing, Aug 19 '21 at 06:55
This completely contradicts the API documentation for position: sticky: https://developer.mozilla.org/en-US/docs/Web/CSS/position — lux, Aug 02 '23 at 21:34

score 1 · Answer 2 · answered Aug 19 '21 at 06:53

Should've give the sticky and top-0 to the main element I want to stick.

 {!categorySearch && (
        <div className="max-w-2xl mx-auto z-40 relative  font-metropolis_semibold">
          {/* <div className="relative"> */}
          <div className="sticky top-0 z-40 bg-white w-full transition-all">
            <div
              id="logo"
              className={
                logo
                  ? "px-md mt-10 font-medium"
                  : "px-md mt-10 font-medium animate"
              }
            >
              <div className="overflow-x-hidden ">
                <img
                  src={settings.logo_intro_image_url}
                  alt={settings.name}
                  className="max-w-full object-contain company-logo"
                  style={{ height: settings.logo_height }}
                  id="company-logo"
                />
              </div>
            </div>
            <div
              className={`${
                logo ? "shadow-none border-none" : "border-b-2 border-gray-200"
              }`}
            >
              <TopOptions
                showOption={showOption}
                setShowOption={setShowOption}
                addBorder={logo}
                outlets={outlets}
                languageLabels={languageLabels}
                settings={selectedOutlet.settings}
              />
            </div>
          </div>
          {Object.keys(bannerArray).length === 1 ? (
            <div className="w-full px-md border-b-8 border-banner pb-md">
              {bannerArray &&
                bannerArray.map((banner, index) => {
                  return (
                    <>
                      <PosterSlider
                        key={index}
                        image={banner.image}
                        loadingBanners={loadingBanners}
                        isSingle={Object.keys(bannerArray).length === 1}
                      />
                    </>
                  );
                })}
            </div>
          ) : (
            <div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
              {bannerArray &&
                bannerArray.map((banner, index) => {
                  return (
                    <PosterSlider
                      key={index}
                      image={banner.image}
                      loadingBanners={loadingBanners}
                      isSingle={Object.keys(bannerArray).length === 1}
                    />
                  );
                })}
            </div>
          )}
          <div className="flex flex-row justify-between items-center px-md my-25p">
            <p className="font-metropolis_regular text-sm break-words">
              {languageLabels.like_to_order}
            </p>
            <img
              src={Search}
              alt="search"
              onClick={() => setCategorySearch(true)}
            />
          </div>
          <div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
            {categoryList.map((category) => {
              // console.log(category);
              return (
                <Dishes
                  key={category.category_id}
                  category={category}
                  languageLabels={languageLabels}
                  loading={loadingCategories}
                />
              );
            })}
          </div>
          <BottomNavigation
            languageLabels={languageLabels}
            isLoyalty={settings.enable_reward_points_functionality}
          />
          {/*  </div> */}
        </div>

Why position sticky is not working in my code?

2 Answers2