Other positions are working good, but when I try sticky its not working. I want the parent container to stick at my bottom of page.
.control-con {
position: sticky;
bottom: 0px;
width: 100%;
}<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
Sticky depends on the placement and the content added in the HTML.
If the positioned element is set to bottom, content has to precede it, like so:
.control-con {
position: sticky;
bottom: 0px;
width: 100%;
}<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum sem dui, nec mattis nunc convallis ut. Proin posuere placerat risus, ut semper lorem varius ac. Curabitur consequat ex sed sem ultrices, quis ornare elit mollis. Fusce eu tristique enim, quis bibendum lectus. Nulla magna magna, maximus in urna et, mollis luctus lectus. Praesent augue mi, rhoncus eu ligula in, aliquet imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut efficitur gravida velit. Aliquam et libero lacinia, mollis metus vel, finibus risus. Pellentesque mollis augue ac condimentum mollis.
In lacinia congue porta. Curabitur augue felis, ultricies in velit et, egestas sagittis neque. Donec nec tristique tortor. Mauris tempor erat risus. Nullam vel congue ligula. Sed nulla sem, venenatis nec iaculis sed, ornare eget ante. Etiam efficitur magna vel ligula porta, nec porttitor turpis tempor. Curabitur at tempor erat. Aliquam venenatis consectetur dui. Integer id ipsum eleifend, dictum justo at, finibus nibh.
Fusce dignissim vulputate elit, a pulvinar ipsum fringilla at. In lacinia felis libero, sit amet placerat erat molestie at. Duis laoreet metus nec nunc semper convallis. Nulla lacus est, suscipit at aliquam et, mattis dignissim nibh. Donec id quam massa. Praesent posuere sagittis erat, non aliquet tellus dictum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus justo dolor, cursus tempor orci sed, cursus cursus lacus.
Phasellus ullamcorper justo a turpis commodo, et semper neque vehicula. Ut facilisis nisl eleifend ex feugiat blandit. Aenean mollis euismod orci sit amet condimentum. Nulla varius lorem eu ex rutrum, et imperdiet est placerat. Nunc eu sem molestie, laoreet ipsum eu, condimentum lacus. Maecenas ut ipsum mi. Morbi in suscipit orci.
Donec vel diam et tortor ultricies commodo. Donec in enim quis urna pharetra congue. Nunc dignissim volutpat elit eu suscipit. Aenean et porta orci. Etiam lobortis malesuada nisi vitae feugiat. Quisque purus lectus, aliquam quis suscipit vitae, porta vitae arcu. Integer maximus turpis quis volutpat blandit. Sed et commodo nisi. In risus tellus, eleifend ac finibus nec, viverra id arcu. Aenean elit diam, mattis porta aliquam eget, sagittis a dolor. In feugiat sapien fringilla dignissim viverra. Aliquam non dolor fermentum, congue tellus sed, tincidunt est. Ut finibus iaculis purus vitae rhoncus. Morbi dignissim leo tincidunt mattis lacinia.</div>
<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>Else if we set the element we want to stick to top, the content has to come after it in order for it to work:
.control-con {
position: sticky;
top: 0px;
width: 100%;
}<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum sem dui, nec mattis nunc convallis ut. Proin posuere placerat risus, ut semper lorem varius ac. Curabitur consequat ex sed sem ultrices, quis ornare elit mollis. Fusce eu tristique
enim, quis bibendum lectus. Nulla magna magna, maximus in urna et, mollis luctus lectus. Praesent augue mi, rhoncus eu ligula in, aliquet imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut efficitur gravida velit. Aliquam
et libero lacinia, mollis metus vel, finibus risus. Pellentesque mollis augue ac condimentum mollis. In lacinia congue porta. Curabitur augue felis, ultricies in velit et, egestas sagittis neque. Donec nec tristique tortor. Mauris tempor erat risus.
Nullam vel congue ligula. Sed nulla sem, venenatis nec iaculis sed, ornare eget ante. Etiam efficitur magna vel ligula porta, nec porttitor turpis tempor. Curabitur at tempor erat. Aliquam venenatis consectetur dui. Integer id ipsum eleifend, dictum
justo at, finibus nibh. Fusce dignissim vulputate elit, a pulvinar ipsum fringilla at. In lacinia felis libero, sit amet placerat erat molestie at. Duis laoreet metus nec nunc semper convallis. Nulla lacus est, suscipit at aliquam et, mattis dignissim
nibh. Donec id quam massa. Praesent posuere sagittis erat, non aliquet tellus dictum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus justo dolor, cursus tempor orci sed, cursus cursus
lacus. Phasellus ullamcorper justo a turpis commodo, et semper neque vehicula. Ut facilisis nisl eleifend ex feugiat blandit. Aenean mollis euismod orci sit amet condimentum. Nulla varius lorem eu ex rutrum, et imperdiet est placerat. Nunc eu sem molestie,
laoreet ipsum eu, condimentum lacus. Maecenas ut ipsum mi. Morbi in suscipit orci. Donec vel diam et tortor ultricies commodo. Donec in enim quis urna pharetra congue. Nunc dignissim volutpat elit eu suscipit. Aenean et porta orci. Etiam lobortis malesuada
nisi vitae feugiat. Quisque purus lectus, aliquam quis suscipit vitae, porta vitae arcu. Integer maximus turpis quis volutpat blandit. Sed et commodo nisi. In risus tellus, eleifend ac finibus nec, viverra id arcu. Aenean elit diam, mattis porta aliquam
eget, sagittis a dolor. In feugiat sapien fringilla dignissim viverra. Aliquam non dolor fermentum, congue tellus sed, tincidunt est. Ut finibus iaculis purus vitae rhoncus. Morbi dignissim leo tincidunt mattis lacinia.</div>You just have to place content before the sticky element inside the HTML, and it will work.
