为什么位置：粘性不会将元素定位到右：0？

Question

我试图将我的元素定位到right:0。但它不起作用。我的元素仍在浏览器窗口的左边缘。

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

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

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

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

Answer 2

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

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

您应该将 ma​​rgin-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>