Hello @Norm,
I have a couple of observations and requests regarding position: sticky behavior in Blocs:
1. Canvas Interaction Bug (position: sticky + z-index)
Issue:
When building a “Sticky Stacking Cards” layout where multiple Div Containers are placed inside the same Bloc and styled with position: sticky alongside incremental z-index values (e.g., .z-10, .z-20, .z-30, .z-40), the Blocs visual editor canvas becomes non-interactive for subsequent elements.
Behavior:
- Text, images, or buttons inside Cards 2, 3, and 4 cannot be clicked or selected on the canvas in the main editing window.
- Selecting these elements via the Left Sidebar (DOM Tree) works fine, confirming the element structure is intact.
Cause:
The editor’s invisible bounding/interaction boxes (hitboxes) for earlier sticky cards remain stacked over the canvas area, effectively creating a transparent layer that blocks mouse inputs for elements rendered underneath them in the viewport.
My Workaround:
Currently, I have to temporarily disable position: sticky or reset the z-index classes in the Class Manager, or delete the classes from the Cards just to edit text/content directly on the canvas, then re-enable it afterward.
Requested Fix:
Recalculate or disable the invisible selection hitboxes for sticky-positioned elements within the visual canvas so that elements underneath remain directly selectable on the main editing board.
2. Parent Overflow Conflict with position: sticky
Issue:
Standard CSS position: sticky requires all parent containers to have overflow: visible. In Blocs, wrapper classes (such as .page-container or .bloc) can sometimes enforce an internal overflow restriction (e.g., due to background effects or default resets), which silently disables position: sticky in the Blocs preview and the browser without any visual warning.
My Workaround:
Adding custom CSS:
html, body, .page-container, .bloc {
overflow: visible !important;
}
Requested Feature:
Native handling or a toggle setting for Blocs blocks/containers to automatically allow overflow: visible when sticky positioning is detected or needed on child elements.
Have a great weekend!