Why Doesn't Position: Sticky Work in Chrome

Why doesn't position: sticky work in Chrome?

EDIT: You need to launch with --enable-experimental-webkit-features flag enabled via about:flags.

Update: This does not work on Chrome v35 through v51, Chrome 52 reenables this with the experimental web platform features flag. Starting from Chrome 56 position: sticky works out of the box.

position:sticky is not working

It works fine if you move the navbar outside the header. See below. For the reason, according to MDN:

The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left.

For the containing block:

The containing block is the ancestor to which the element is relatively positioned

So, when I do not misunderstand, the navbar is positioned at offset 0 within the header as soon as it is scrolled outside the viewport (which, clearly, means, you can't see it anymore).

.navbar {  background: hotpink;  width: 100%;  height: 50px;  position: -webkit-sticky;  position: sticky;  top: 0;}
.header {  height: 150px;  background: grey;}
body {  height: 800px;  position: relative;}

<div class="header"><div class="desc">Description</div><div class="logo"><img src=""/></div></div>
<div class="navbar"></div>

How does the position: sticky; property work?

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

...

You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
[source: MDN]

So in your example, you have to define the position where it should stick in the end by using the top property.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Position sticky works in Firefox, doesn't work in Chrome

Try applying position: sticky; to th instead of thead.
Example:

.table-wrapper {
    border: 1px solid #ddd;
    background-color: #fff;
    position: relative;

    > thead {   
        th{
            background-color: #ddd;
            z-index: 3;
            position: sticky;
            top: 0;
        }
    }
}

position:sticky ignoring right value in chrome

You are confusing between how absolute and fixed works compared to sticky.

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, ^ref

right and left will define the offset only when the element can stick on scroll. They will never position the element to the right or the left of the container.

Some examples:

.box {
  border:2px solid;
  height:100px;
  margin:0 40px;
}
.box > div {
  position:sticky;
  height:100%;
  width:100px;
  background:red;
  right:20px;
  left:20px;
}

body {
  width:200vw;
}

a left sticky behavior
<div class="box">
  <div></div>
</div>
I move the element to the right using margin and we have a right sticky behavior
<div class="box">
  <div style="margin-left:auto;"></div>
</div>

Safari position:sticky not working in an overflow:auto element

I got this solution from someone else:

http://cssdeck.com/labs/bu0nx69w

Basically, instead of position:sticky, use position:fixed for the right panel. The key is to also you will-change:transform in a parent div (in the above example, in .modal-content) so position:fixed becomes fixed relative to that parent, and not the viewport. It's a neat little trick

Why is my position:sticky not working on iOS?

I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.

As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:

<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
    <i class="fa fa-bell"></i>
    <span>Jobalarm aktivieren</span>
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</div>
</a>

For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.

Chrome 80 position sticky element only sticking the looks, not the DOM itself

Turns out to be a bug, It's fixed in in the latest version.

Why Doesn't Position: Sticky Work in Chrome