CSS position: sticky - can it enable absolute-then-fixed behaviour (instead of relative-then-fixed or static-then-fixed)?

Question

In CSS, position: sticky enables an element to display with a position: static behaviour (ie. it adopts its default position within the document flow) until it reaches a certain scroll position, after which it adopts position: fixed behaviour.

So... does that mean we cannot use position: sticky on an element which requires a normal behaviour of position: absolute?

Context:

I have an out-of-flow element which occupies a position towards the top-left corner of the viewport. After an inch or two of scrolling, the element hits the top of the viewport and, ideally, I'd like it not to carry on disappearing at that point.

Unfortunately it only supports relative positioning. Also note that `position: sticky` currently has [**no support**](https://caniuse.com/#feat=css-sticky) in Internet Explorer, and spotty support for the other browsers. I'd recommend against it personally. — Obsidian Age, Mar 21 '18 at 22:17
Please note, in CSS the default value of `position` is `static` and not `relative`. — GibboK, Mar 21 '18 at 22:19

score 4 · Answer 1 · answered Apr 08 '22 at 17:05

You actually can leverage display: grid and have a sticky element that doesn't pushes its siblings:

header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  border: 1px dashed #f00;
}

main {
  display: grid;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section {
  grid-column: 1;
  height: 100vh;
  border: 1px dashed #0f0;
}

.first.section {
  grid-row: 1;
}

.sticky {
  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 30vh;
  border: 1px dashed #0ff;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  border: 1px dashed #f00;
}

<header>I'm the header</header>
<main>
  <div class="sticky">I'm sticky</div>
  <div class="first section">Just</div>
  <div class="section">some</div>
  <div class="section">sections</div>
</main>
<footer>I'm the footer</footer>

The trick here is to place the sticky section and its first sibling on the first row and first column of their parent (because grids allow us to place many elements in the same cell).

The sticky element remains sticky in its parent so it will stay on scroll beyond its cell.

score 1 · Answer 2 · answered Mar 21 '18 at 22:15

The point of position:sticky is that it is only fixed while the parent element is in view. A position:absolute element isn't attached to it's parent.

It could be interesting if such a position would exist and the rule would be that the element would be absolute, while the element it is absolute positioned to is in view, but currently there exists nothing like this nativley, but you could try to recreate it using JS.

score 1 · Answer 3 · answered Mar 22 '18 at 02:53

As GibboK says, the default positioning scheme isn't absolute positioning, it's the static position. Elements are laid out in normal flow by default — if out-of-flow were the default, then the default HTML page would be impossible to read. Besides, absolutely positioned elements do scroll with the page most of the time — the only time you can make an absolutely positioned behave like a fixed positioned element with respect to page scrolling is through some semi-complicated CSS.

If you're asking whether it's possible for

a stickily positioned element to be out-of-flow when stuck and unstuck, or
for the containing block of a stickily positioned element to be determined the same way as for an absolutely positioned element,

then unfortunately neither of these is supported by sticky positioning.

Yes, I worded the question badly. I have an out-of-flow element which occupies a position towards the top-left corner of the viewport. After an inch or two of scrolling, the element hits the top of the viewport and, ideally, I'd like it not to carry on disappearing at that point. — Rounin - Standing with Ukraine, Mar 22 '18 at 12:09

CSS position: sticky - can it enable absolute-then-fixed behaviour (instead of relative-then-fixed or static-then-fixed)?

3 Answers3