如何相对于屏幕而不是相对于父屏幕设置粘性位置

Question

我想要一个元素的position:sticky，但我不希望它相对于父元素。我希望它相对于屏幕。即类似sticky-absolute之类的东西。当前的行为是我有一个可以设置的元素：

position:absolute;
bottom:0;

并且正如预期的那样，无论我在html中的哪个位置设置此元素，它都将位于屏幕底部。但是，当我开始滚动时，该元素正按预期从position:absolute向上移动。所以我希望它坚持下去。

但是，如果我要使用

position:sticky;
bottom:0;

我将不得不在html的底部设置该元素，以使其正常工作，甚至当您滚动到屏幕的最底部时，它会将所有内容向上推。也就是说，如果position:absolute根据需要溢出了内容，sticky不会这样做，那么当您滚动到屏幕末端时，它实际上就是block的内容。

不在屏幕末尾时的粘滞块示例：

然后，当您滚动时，您会看到我尝试避免的问题：

可以在此codpen

中找到该代码

它是从here

取来的

您会在红色标记中看到该元素正在占用空间并充当块，并且当您继续滚动时，该元素仍然停留在父对象而不是屏幕底部。如何使它按说明工作？

1. 能够将元素放置在html中的任何地方
2. 它始终停留在屏幕底部，而不是父屏幕
3. 不充当障碍物，而是实际掩盖内容并将其溢出

Answer 1

您正在寻找 position：fixed ，因为它适用于视口。它始终在底部可见，并且相对于其自身的页面。看例子：

*{
  box-sizing: border-box
}

body{
  height: 3000px;
  padding: 3rem;
}

section{
  background: dodgerblue;
  color: white;
  line-height: 1.5;
  padding: 30px;
}

div{
    display: block;
  width: 100px;
  height: 100px;
  background: tomato;
  position: fixed;
  bottom: 0;
}

<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
  </p>
  <div></div>
</section>