Why Bottom:0 Doesn't Work With Position:Sticky

CSS position: sticky; bottom: 0 not sticking to bottom

The element #up-arrow will not stick to the bottom of the container with the current layout.

Because, sticky element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).

Here the element #up-arrow is at the top of the container, hence the element will not be able to stick to bottom on scroll.

Add some content on top of #up-arrow to see sticky working.

Sample Implementation

.container {
  min-height: 100vh;
  width: 100vh;
  background-color: yellow;
}

#up-arrow {
  width: 45px;
  height: 45px;
  border: 2px solid #23ADF8;
  border-radius: 23.5px;
  background-color: #23ADF8;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}

#up-arrow:hover {
  background-color: white;
}

#up-arrow:hover img {
  filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}

#an-element {
  height: 100vh;
}

<div class="container">
  <div id="an-element"></div>
  <div id="up-arrow">
    <a href="#top">
      <img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
    </a>
  </div>
</div>

Why position sticky is not working in my code?

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>
      )}

Css Sticky position not working after apply top:0;

Your sticky item is correct. The problem is because your content has nothing, therefore the sticky content is scrolled along with your content.

* {        box-sizing: border-box;    }        body {        margin: 0;        font: 20px Candara, sans-serif;        background-color: whitesmoke;        height: 2000px;    }            /* #homepage {        position: relative;        top: 0;    } */        .header {        text-align: center;        /* position: absolute; */        /* top: 0px; */        color: snow;        padding: 1px;        width: auto;        /* margin-top: 00px; */        background-color: red;        /* background-color: whitesmoke; */    }        .navigation-panel {        display: block;        background-color: snow;        position: sticky;        /* position: -webkit-sticky; */        /* overflow: hidden; */        top: 0;        /* height: 55px; */        border: 1px solid snow;    }        .navigation-panel a {        text-decoration: none;        color: red;        float: left;        padding: 14px;    }        .navigation-panel a:hover {        color: snow;        background-color: brown;        /* transition: 0.5s; */        /* border: 1px solid snow; */    }        #content-body {        height: 1000px;        background-color: gold;    }

 <!DOCTYPE html>    <html>        <head>        <meta charset='utf-8'>        <meta http-equiv='X-UA-Compatible' content='IE=edge'>        <title>Sample Codings</title>        <meta name='viewport' content='width=device-width, initial-scale=1'>        <link rel='stylesheet' type='text/css' media='screen' href='main.css'>        <!-- <script src='main.js'></script> -->    </head>        <body>        <div id="homepage">            <div class="header">                <h1>Sample Codings</h1>            </div>                <div class="navigation-panel">                    <a href="">Home</a>                <a href="">checking</a>                <a href="">Java</a>                <a href="">Spring</a>                <a href="">ThreeJs</a>                </div>            <div id="content-body"></div>        </div>    </body>        </html>

DIV with position:absolute;bottom:0 doesn't stick to the bottom of the container in Firefox

The issue in Firefox is caused by display:table. Essentially you are telling Firefox to treat this element as a table.

In Firefox position:relative is not supported on table elements. It isn't a bug though, as in the spec the treatment of position:relative table elements is undefined.

This means that in your example the footer is being positioned relative to the window and not the container.

One solution is to use display:block instead or just remove the display rule entirely. You will see the footer will drop down to its rightful place.

A second solution would be to wrap another non-table div around the container and set position:relative to that instead.

A third option is to add position:relative to the body. Live example: http://jsfiddle.net/tw16/NbVTH/

body {
    padding: 0;
    margin: 0;
    position: relative; /* add this */
}

Why Bottom:0 Doesn't Work With Position:Sticky

CSS position: sticky; bottom: 0 not sticking to bottom

Why position sticky is not working in my code?

Css Sticky position not working after apply top:0;

DIV with position:absolute;bottom:0 doesn't stick to the bottom of the container in Firefox

Related Topics

Leave a reply