Why Is Absolute Child of a Sticky Is Always Hiding Behind Another Sticky

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>

Absolute element going behind sticky/fixed element

Try adding z-index: 1 to the element with class article-actions-dropdown-wrapper.That is,

.article-actions-dropdown-wrapper{
  z-index: 1
}

CSS position sticky doesn't work properly when element is inside another

if your aside will always have a fixed height use negative top value and make the parent container sticky:

nav {
  height: 50px;
  background: lightgreen;
}

header {
  position: sticky;
  top: -30px;
}

main {
  height: 200vh;
  background: linear-gradient(180deg, black 0%, white 100%);
}

aside {
  height: 30px;
  background: red;
}

<header>
  <aside></aside>
  <nav></nav>
</header>
<main></main>

Overflow hidden on sticky parent when child is fixed

Not sure whether you need separate content for the nav and footer per section but this answer only applies if you want the same header and footer content to appear over all sections and just change color.

It's possible using mix-blend-mode and the support is good for modern browsers. The spec says that Safari doesn't work "On SVG elements" but it seems to work fine on Safari in the demo below, maybe because it's applied to the SVG's parent.

I pulled the nav and footer out of each section and made one copy of each at the top. Then I applied mix-blend-mode: difference; to both of them and made the fill color of the SVG elements white. Then I added mix-blend-mode: screen; to the .dark class which makes it so that whenever the white SVG elements with difference on their parent container pass over it the color of the SVG elements will change to white. This will not be very useful if you're looking to support IE or if you want different headers and footers by section but in the event that you just want what you had in your code demo to work as you explained then it should be fine for modern browsers.

If you do need varying content per section then it will most likely require Javascript since a fixed element will not respect a relative positioned parent element's rules or will not act like a window fixed element on scroll when using the translateZ hack for instance, good luck!

html {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 99;
  mix-blend-mode: difference;
}

.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
  mix-blend-mode: difference;
}

.sticky {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  background-color: #ffffff;
  color: #000000;
}
.sticky p {
  position: sticky;
  top: 50%;
  transform: translateY(-50%)
}
.dark {
  background-color: #1e1e1e;
  color: #fff;
  mix-blend-mode: screen;
}

<div class="nav"><svg height="30" width="200">
  <text x="0" y="15" fill="#fff">Logo svg!</text>
 </svg></div>
<div class="footer"><svg height="30" width="200" transform="rotate(90)">
  <text x="0" y="15" fill="#fff">Footer!</text>
 </svg></div>
<main>
  <div class="sticky">
    <p>Section Light</p>
  </div>
  <div class="sticky dark">
    <p>Section Dark</p>
  </div>
  <div class="sticky">
    <p>Section Light</p>
  </div>
  <div class="sticky dark">
    <p>Section Dark</p>
  </div>
  <div class="sticky">
    <p>Section Light</p>
  </div>
</main>

Sticky footer (not fixed) hiding main content

You can add:

#content {
  padding-bottom: 200px;
}

Basically offsetting the height of the footer.

http://codepen.io/sol_b/pen/QdzYvV

My position: sticky element isn't sticky when using flexbox

Since flex box elements default to stretch, all the elements are the same height, which can't be scrolled against.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other browsers except for Firefox have some issues with position: sticky tables.

.flexbox-wrapper {  display: flex;  overflow: auto;  height: 200px;          /* Not necessary -- for example only */}.regular {  background-color: blue; /* Not necessary -- for example only */  height: 600px;          /* Not necessary -- for example only */}.sticky {  position: -webkit-sticky; /* for Safari */  position: sticky;  top: 0;  align-self: flex-start; /* <-- this is the fix */  background-color: red;  /* Not necessary -- for example only */}

<div class="flexbox-wrapper">  <div class="regular">    This is the regular box  </div>  <div class="sticky">    This is the sticky box  </div></div>

---

Related Topics