为什么 position:sticky 没有将元素定位到 right:0？

Question

我试图将我的元素定位到 right:0。但它不起作用。我的元素仍然在浏览器的左边缘 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>

为什么？是否可以使用 position: sticky 水平定位元素？

Answer 1

只需将您的位置更改为固定位置即可。

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

Answer 2

您应该将 margin-left: auto 添加到您的粘性元素；

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

Answer 3

sticky 不像我们使用 absolute 或 fixed 那样用于定位元素。要获得正确的粘性行为，您需要首先将元素放在右侧：

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

相关问题：

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