In my single page application, I have a fixed container and I am trying to make one div inside this container overlap the boundaries of the fixed container while also vertically scrolling with its contents. Unfortunately, I have only been able to achieve either one or the other, but not both simultaneously. I am wondering if there is a CSS-only solution available for this issue?
You can view a demo of the problem here.
The Objective
[Example image removed due to missing reputation. View it here.]
My goal is to create a clickable marker next to an input control in a fixed sidebar, where users can edit various properties of a business item. The marker should stand out by overlapping the container's boundaries. To achieve this, there are five main requirements:
- The topmost container must have position: fixed, as the background SPA can be scrolled in any direction
- The content within the topmost container should scroll vertically when needed, without horizontal scrolling
- A box should be positioned next to a target within the content
- This box should overlap the topmost container's boundaries
- The box should also scroll vertically along with the topmost container's content
The structure follows fixed container > content(s) > overlapping div. I am aware that using overflow and relative positioning together can prevent an absolute child from overlapping correctly. Therefore, I have tried various combinations of CSS rules and HTML markup, but have not yet found a solution that satisfies all requirements. Any suggestions on achieving this without backend code are greatly appreciated.
The Code
Here is a simplified version of the HTML markup:
<div class="sidebar-container">
<div class="sidebar-content-wrapper">
<div class="sidebar-content">
<div class="sidebar-content-main">
<!-- more content -->
<div class="overlap-container">
<div class="overlap-wrapper">
<div class="overlap-relative-container">
<div class="overlap-box"></div>
</div>
<div class="overlap-caption">Some text, the box should appear left to this element.</div>
</div>
</div>
<!-- more content -->
</div>
</div>
</div>
</div>
The topmost container has a fixed position:
.sidebar-container {
position: fixed;
// [ ... ]
}
The content wrapper enables vertical scrolling while hiding the horizontal scrollbar:
.sidebar-content-wrapper {
height: 100%;
// content should be scrollable vertically, while horizontal scroll is not allowed
overflow-y: scroll;
overflow-x: hidden;
}
The box that should overlap the container is positioned absolutely:
.overlap-box {
position: absolute;
left: -2em;
width: 3em;
height: 3em;
z-index: 99;
// [ ... ]
}
However, the box does not stay overlapped when the content is scrolled vertically, as it is positioned relative to the nearest positioned element, .sidebar-container. Adding position: relative to the parent element of the box allows it to scroll with the content, but the overlap is lost.
You can find the complete code in this jsfiddle.
Key Takeaways
- A relative positioned element within a container with specified overflow rules will clip absolute positioned children
- I have researched extensively online but have not found a solution tailored to this specific issue, apart from a mention in the comments section of a blog post titled How to make absolute positioned elements overlap their overflow hidden parent
- Complex layout scenarios using CSS alone can be more challenging than expected
Note: Although I acknowledge that a JavaScript solution using the onscroll event is possible, I prefer a purely CSS-based approach to resolve this matter elegantly. Your insights on untangling this dilemma would be greatly appreciated!