Why Is My Element Not Sticking to The Left When Using Position Sticky in CSS

Why is my element not sticking to the left when using position sticky in css?

The sticky element is a block level element inside another block level so this one is already taking 100% width if its parent element and there is no room for a left sticky behavior.

Add some border to better see:

.sticky {  position: -webkit-sticky;  position: sticky;  left: 0;  top: 0;  border:2px solid green;}
.scroll-horizontally-and-vertically {  width: 4000px;  height: 2000px;  background-color: lightblue;}

<div style="border:2px solid red;">  <div class="sticky">    <h1>please stick to top and left</h1>  </div>  <div class="scroll-horizontally-and-vertically"></div></div>

Nested sticky element with zero left does not sticky

Let's add some border and we will clearly see what is happening:

.scroll {  width: 200px;  height: 200px;  border: 1px solid;  overflow: auto;}.scroll > div {  border:2px solid green;}
.container {  width: 600px;  height: 1000px;  border:2px solid red!important;}.container > div {  border:2px solid green;}
.sticky-left {  position: sticky;  left: 0;}
.sticky-top {  position: sticky;  top: 0;}

<div class="scroll">  <div class="sticky-top">sticky-top</div>  <div class="sticky-left">sticky-left</div>  <div class="container">    <div class="sticky-top">sticky-top-nested</div>    <div class="sticky-left">sticky-left-nested</div>  </div></div>

How does the position: sticky; property work?

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

...

You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
[source: MDN]

So in your example, you have to define the position where it should stick in the end by using the top property.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Why isn't position:sticky with left:0 working inside a scrollable container?

Add border to better see the issue which is related to the use a block level element and the restriction of width:100% (not the one your are setting which is useless but the default behavior of block elements)

.container {  overflow-x: scroll;}
.row {  display: flex;  border:1px solid;}
.item {  min-width: 173px;}
.sticky {  min-width: 250px;  position: sticky;  left: 0;  background: red;}

<div class="container">  <div class="row">    <div class="item sticky">STICKY ROW 1</div>    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>    <div class="item">7</div>    <div class="item">8</div>    <div class="item">9</div>    <div class="item">10</div>  </div>  <div class="row">    <div class="item sticky">STICKY ROW 2</div>    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>    <div class="item">7</div>    <div class="item">8</div>    <div class="item">9</div>    <div class="item">10</div>  </div>  <div class="row">    <div class="item sticky">STICKY ROW 3</div>    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>    <div class="item">7</div>    <div class="item">8</div>    <div class="item">9</div>    <div class="item">10</div>  </div></div>

Position sticky not taking effect

The sticky element in your fiddle has no height setting - use a set height to avoid that, then the sticky position works:

https://jsfiddle.net/rocz5nL1/

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

position:sticky ignoring right value in chrome

You are confusing between how absolute and fixed works compared to sticky.

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, ^ref

right and left will define the offset only when the element can stick on scroll. They will never position the element to the right or the left of the container.

Some examples:

.box {
  border:2px solid;
  height:100px;
  margin:0 40px;
}
.box > div {
  position:sticky;
  height:100%;
  width:100px;
  background:red;
  right:20px;
  left:20px;
}

body {
  width:200vw;
}

a left sticky behavior
<div class="box">
  <div></div>
</div>
I move the element to the right using margin and we have a right sticky behavior
<div class="box">
  <div style="margin-left:auto;"></div>
</div>

---

Related Topics