1

I tried to position my element to right:0. But it doesn't work. My element is still at the left edge of the browser window.

* {
  margin: 0;
  padding: 0;
  font-size: 50px;
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: -webkit-sticky;
  position: sticky;
  right: 0px;
  top: 0px;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div>
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores error nihil in eaque, explicabo, sit autem vel incidunt fuga voluptatum inventore laudantium eligendi velit, sapiente repellat libero? Quas, eius in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, temporibus. Recusandae distinctio ea soluta consequatur provident aliquid magni nostrum, placeat dolores ducimus id atque enim illo! Cum sit iure cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo soluta hic saepe nobis, nulla asperiores autem maiores, fugit quas, eaque voluptatem excepturi error. Adipisci, illo corporis ipsum quis inventore repudiandae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, placeat facilis consectetur alias consequuntur beatae iste eum debitis aut asperiores ducimus? Voluptatem minus explicabo nulla molestias voluptates. Dignissimos, nesciunt quos? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam placeat, vel distinctio incidunt, officiis qui cumque quisquam atque maiores repellendus expedita modi cum vero sapiente odit ea fugit? Alias, fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi atque fugit inventore repellat perspiciatis libero sit qui ipsa? Illum nam pariatur ipsam magni vitae suscipit itaque doloremque soluta, esse minus! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis sunt blanditiis magnam, consectetur quod, numquam ducimus laboriosam nihil fugiat amet suscipit est quam tempore voluptatem iusto ut corporis optio? Illum.</p>
  </div>
</div>

Why? Is there some posibilites to position element horizontally with position: sticky?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Eva
  • 284
  • 3
  • 13

3 Answers3

1

sticky is not used to position the element like we do with absolute or fixed. To have right sticky behavior you need to first place your element at the right side:

.box {
  display:inline-block; /* to contain the text element and create the space for the sticky element */
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: sticky;
  margin-left:auto; /* put at the right side */
  right: 0px;
  top: 0px;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
  font-size: 50px;
}

* {
 margin:0;
}
<div class="box">
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Dolores error nihil in eaque, explicabo, sit autem vel incidunt fuga voluptatum inventore laudantium eligendi velit, sapiente repellat libero? Quas, eius in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, temporibus.
      Recusandae distinctio ea soluta consequatur provident aliquid magni nostrum, placeat dolores ducimus id atque enim illo! Cum sit iure cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo soluta hic saepe nobis, nulla asperiores
      autem maiores, fugit quas, eaque voluptatem excepturi error. Adipisci, illo corporis ipsum quis inventore repudiandae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, placeat facilis consectetur alias consequuntur beatae iste eum
      debitis aut asperiores ducimus? Voluptatem minus explicabo nulla molestias voluptates. Dignissimos, nesciunt quos? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam placeat, vel distinctio incidunt, officiis qui cumque quisquam atque
      maiores repellendus expedita modi cum vero sapiente odit ea fugit? Alias, fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi atque fugit inventore repellat perspiciatis libero sit qui ipsa? Illum nam pariatur ipsam magni vitae
      suscipit itaque doloremque soluta, esse minus! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis sunt blanditiis magnam, consectetur quod, numquam ducimus laboriosam nihil fugiat amet suscipit est quam tempore voluptatem iusto
      ut corporis optio? Illum.</p>
  </div>
</div>

Related questions:

Why bottom:0 doesn't work with position:sticky?

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-1

Just change your position to fixed, that should work.

* {
  margin: 0;
  padding: 0;
  font-size: 50px;
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: -webkit-fixed;
  position: fixed;
  right: 0px;
  top: 0px;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div>
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores error nihil in eaque, explicabo, sit autem vel incidunt fuga voluptatum inventore laudantium eligendi velit, sapiente repellat libero? Quas, eius in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, temporibus. Recusandae distinctio ea soluta consequatur provident aliquid magni nostrum, placeat dolores ducimus id atque enim illo! Cum sit iure cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo soluta hic saepe nobis, nulla asperiores autem maiores, fugit quas, eaque voluptatem excepturi error. Adipisci, illo corporis ipsum quis inventore repudiandae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, placeat facilis consectetur alias consequuntur beatae iste eum debitis aut asperiores ducimus? Voluptatem minus explicabo nulla molestias voluptates. Dignissimos, nesciunt quos? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam placeat, vel distinctio incidunt, officiis qui cumque quisquam atque maiores repellendus expedita modi cum vero sapiente odit ea fugit? Alias, fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi atque fugit inventore repellat perspiciatis libero sit qui ipsa? Illum nam pariatur ipsam magni vitae suscipit itaque doloremque soluta, esse minus! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis sunt blanditiis magnam, consectetur quod, numquam ducimus laboriosam nihil fugiat amet suscipit est quam tempore voluptatem iusto ut corporis optio? Illum.</p>
  </div>
</div>
MFA86
  • 185
  • 1
  • 1
  • 9
-2

You should add margin-left: auto to your sticky element;

* {
  margin: 0;
  padding: 0;
  font-size: 50px;
}

.sticky {
  width: 50px;
  height: 50px;
  background: red;
  position: -webkit-sticky;
  position: sticky;
  right: 0px;
  top: 0px;
  
  /* add this */
  margin-left: auto;
}

.text-block {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div>
  <div class="sticky">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deleniti facilis esse quae vitae ut corrupti maiores, magni obcaecati sit. Aut, rem nostrum officia beatae eligendi facilis provident at aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores error nihil in eaque, explicabo, sit autem vel incidunt fuga voluptatum inventore laudantium eligendi velit, sapiente repellat libero? Quas, eius in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, temporibus. Recusandae distinctio ea soluta consequatur provident aliquid magni nostrum, placeat dolores ducimus id atque enim illo! Cum sit iure cumque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo soluta hic saepe nobis, nulla asperiores autem maiores, fugit quas, eaque voluptatem excepturi error. Adipisci, illo corporis ipsum quis inventore repudiandae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, placeat facilis consectetur alias consequuntur beatae iste eum debitis aut asperiores ducimus? Voluptatem minus explicabo nulla molestias voluptates. Dignissimos, nesciunt quos? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam placeat, vel distinctio incidunt, officiis qui cumque quisquam atque maiores repellendus expedita modi cum vero sapiente odit ea fugit? Alias, fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi atque fugit inventore repellat perspiciatis libero sit qui ipsa? Illum nam pariatur ipsam magni vitae suscipit itaque doloremque soluta, esse minus! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis sunt blanditiis magnam, consectetur quod, numquam ducimus laboriosam nihil fugiat amet suscipit est quam tempore voluptatem iusto ut corporis optio? Illum.</p>
  </div>
</div>
Majid Ghafoorzade
  • 480
  • 3
  • 13