Html 位置：粘在左下角

position: sticky to bottom left

提问by Markus

I have just been playing around in FF32 & Safari 7, with position: sticky. And it works perfecly with top: 0pxor left: 0px(to stick horizontally), but it doesn't seem to work when I try bottom: 0pxor even better, combine bottom: 0; left: 0it doesn't set itself to the bottom of the element. This behaviour could be tried out here: http://html5-demos.appspot.com/static/css/sticky.html, by simply changing the top: 10pxattribut to bottom: 0. Is that not supposed to work?

我刚刚在 FF32 和 Safari 7 中玩耍，使用position: sticky. 它与top: 0pxor完美配合left: 0px（水平粘贴），但是当我尝试bottom: 0px甚至更好时，bottom: 0; left: 0它似乎不起作用，组合它不会将自身设置到元素的底部。可以在此处尝试此行为：http: //html5-demos.appspot.com/static/css/sticky.html，只需将top: 10px属性更改为bottom: 0。这不应该工作吗？

I think it is a valid use-case to stick something to the bottom in the same way as one would want to stick something to the top. In our case it is, because I am interested in having something sticky on horizontal scroll, but I want this element to be at the bottom of the parent element.

我认为将某些东西粘在底部是一个有效的用例，就像人们想要将某些东西粘在顶部一样。在我们的例子中是这样，因为我对在水平滚动上有一些粘性感兴趣，但我希望这个元素位于父元素的底部。

Anyway, any suggestions and extra info are welcome.

无论如何，欢迎任何建议和额外信息。

回答by corysimmons

position: sticky;
bottom: 30px;

does work. Keep in mind stickyelements are relative to their parent.

确实有效。请记住，sticky元素是相对于它们的父元素的。

http://codepen.io/corysimmons/pen/QyBMXN?editors=1100(in Firefox)

http://codepen.io/corysimmons/pen/QyBMXN?editors=1100（在 Firefox 中）

In this case, <section>(the blue area) is the parent.

在这种情况下，<section>（蓝色区域）是父级。

It does not work with Stickyfill though https://github.com/wilddeer/stickyfill#what-it-doesnt

尽管https://github.com/wilddeer/stickyfill#what-it-doesnt它不适用于 Stickyfill

I suggest you play around with it for a bit longer til you get the hang of it.

我建议你多玩一会儿，直到你掌握它的窍门。

Let me know if you need a JS plugin that will behave like position: stickywithout having to use position: sticky(can't wait for browser support or a stronger polyfill though).

让我知道您是否需要一个position: sticky无需使用position: sticky即可运行的 JS 插件（虽然不能等待浏览器支持或更强大的 polyfill）。

回答by rayray

The way to think about an element with position: stickyis as follows:

考虑一个元素的方式position: sticky如下：

"The item that has position: stickyshall always remain in its normal place inside its parent, UNLESS said normal placegoes outside of the viewport, in which case sticky item should become fixed relative to the viewport. All bets are off if the parent container also leaves the viewport, in which case the sticky items gets scrolled away with it".

“具有的项目position: sticky应始终保留在其父项内的正常位置，除非说正常位置在视口之外，在这种情况下，粘性项应相对于视口固定。如果父容器也离开视口，则所有赌注都将关闭视口，在这种情况下，粘性项目会随之滚动”。

This Codepenillustrates it really well. Notice how the red box stays in its normal place as long as the parent blue box is in normal view. However, when you scroll such that the red box starts to go out of the viewport, it gets fixed. Finally when the blue parent gets scrolled out of the view entirely, the red box also disappears.

这个 Codepen 很好地说明了它。注意只要父蓝框在正常视图中，红框如何保持在其正常位置。但是，当您滚动使红色框开始离开视口时，它会得到修复。最后，当蓝色父项完全滚出视图时，红色框也消失了。

* {
  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: sticky;
  bottom: 30px;
  }

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

回答by cbaigorri

If you know the height of the sticky element then you can use something like this:

如果你知道粘性元素的高度，那么你可以使用这样的东西：

.sticky-element {
  position: sticky;
  top: calc(100vh - 50px);
}

This would also work with Stickyfill. Not sure about browser support though.

这也适用于 Stickyfill。虽然不确定浏览器支持。

回答by qwabra

body {
  min-width: 600px;
  min-height: 400px;
}

.container {
  background-color: #9588c170;
  /* , */
  position: absolute;
  width: 100%;
  height: 100%;
  /* overflow: scroll; */
  overflow: auto;
}

.sticky {
  width: 300px;
  height: 200px;
  background-color: #9588c1;
  /* , */
  position: sticky;
  left: 1000px;
  top: 900px;
}

<div class="container">
  <div class="sticky">div</div>
</div>

回答by Milad Ashrafi

.sticky-container {
  position: sticky;
  top: 100vh; // push it to the bottom from top
  transform: translateY(-100%); // move it up again depending on its own height
  width: 100%;
  background: white;
  padding: 20px 0;
}

回答by almightyBoognish

with the following html:

使用以下 html：

<div id="bottom-left">I'm in the bottom left!</div>

and the following css:

和以下CSS：

#bottom-left {
    width: 250px;
    height: 250px;
    color: #fff;
    background-color: #000;
    position: fixed;
    bottom: 0;
   left: 0;
}

you should have a sticky div in the bottom left corner of the page

你应该在页面的左下角有一个粘性 div

Example: http://jsfiddle.net/wjxws9hy/

示例：http: //jsfiddle.net/wjxws9hy/