Repository navigation
Add missing adjustments to "sticky" #67873
Description
What problem does this address?
"position: sticky" - used in group block - needs (and allows!) in CSS two additional parameters:
- top / right / bottom / left
- a distance value
To allow full control of "sticky" both are valuable, but at least (2.) distance is needed!
Imagine the construction of a template with 2 elements:
A) A sticky Header with navigation and so on
B) A sticky sidebar with search, table of content, contact info, ...
To get an appropriate design, at the moment you must add manually (maybe as CSS class) the missing z-index to adjust the overlapping of two (or more) sticky elements. (And also when working with negative margins to get overlapping blocks!)
And you must play around with the content in the sidebar container to adjust padding/margin or placing some (not necessary) content at the top, which is hidden under the overlapping (z-index!) Header when both became sticky.
What is your proposed solution?
- Add "z-index" control to the adjustable Group parameters in the user-interface. (Resolves all overlapping needs of sticky and negative margins!)
- Add - at least - "distance" control to the "sticky" interface. (Allows trouble-free combination of several sticky elements!)
- Add - if possible - "top / right / bottom / left" control to the "sticky" interface. (Allows complete control of sticky positioning!)
Activity
yogeshbhutkar commentedon Dec 19, 2024
Hi @burnuser,
Thank you for bringing up this issue—it’s indeed a valuable feature to have. I’ve created a PR to address it. Appreciate your input!
Thanks.
burnuser commentedon Dec 20, 2024
Thank You for Your quick and kind reaction!
And especially for the solution!
Some remarks / suggestions:
1.) Add a "Top" default value of 0 to be compliant with existing "Sticky" implementation and without need of additional user-input in new interface.
2.) Instead of (rectangle):
Top - Right
Bottom - Left
consider field layout change to (diamond):
Top (centered)
Left - Right
Bottom (centered)
... which would be more intuitive to understand, even without reading the labels.
3.) Having your new interface (with or without suggested layout change), we have all needed elements for complete CSS position control and could - after having "sticky" - also add: "static", "relative" (= current group default), "absolute" and "fixed".
As already discussed in Gutenberg forum as future interface extension ...
yogeshbhutkar commentedon Jan 9, 2025
Hi @burnuser, apologies for the delayed response. I believe this issue requires design feedback before proceeding further.
paaljoachim commentedon Sep 12, 2025
I will ping @WordPress/gutenberg-design to comment on this issue.
jasmussen commentedon Oct 6, 2026
It seems valid enough, and although #68123 is older and the position panel has since been rewritten, perhaps there's still something there to resurrect. I wonder if @andrewserong has any instincts?
andrewserong commentedon Oct 6, 2026
Adding adjustments does seem a good idea, at least on the surface. Some challenges to implementing will be:
In terms of capacity, I'm pretty full up on tasks (and my reviews focus) for the 7.2 cycle, so I likely won't be able to help out much in this area in the near-term, but hopefully the above notes might be of help if anyone is keen to dig into this area.