Saya mencoba memposisikan elemen saya ke right:0. Tapi itu tidak berhasil. Elemen saya masih di tepi kiri jendela browser.

* {
  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>

Mengapa? Apakah ada kemungkinan untuk memposisikan elemen secara horizontal dengan position: sticky?

1
Eva 5 Januari 2021, 17:53

3 jawaban

Jawaban Terbaik

Lengket tidak digunakan untuk memposisikan elemen seperti yang kita lakukan dengan absolut atau tetap. Untuk memiliki perilaku lengket yang benar, Anda harus terlebih dahulu menempatkan elemen Anda di sisi kanan:

.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>

Pertanyaan-pertanyaan Terkait:

Mengapa bottom:0 tidak berfungsi dengan position:sticky?

Mengapa elemen saya tidak menempel ke kiri saat menggunakan posisi lengket di css?

1
Temani Afif 5 Januari 2021, 15:23

Ubah saja posisi Anda menjadi tetap, itu seharusnya berhasil.

* {
  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>
-1
MFA86 5 Januari 2021, 15:03

Anda harus menambahkan margin-left: auto ke elemen sticky Anda;

* {
  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>
-2
Majid Ghafoorzade 5 Januari 2021, 15:07