Center fixed div over content area - html

Question

I have a page with a collapsable sidebar (black area). On the right we have the content area. In my example I have a grey square which represents a table. Now I have a div to float on top of this table (red on the picture) and make it fixed to the screen. So it scrolls with the page, but is centered to the content area. See example 1.
Right now it is centered to the viewport, meaning that the sidebar is also taken in account. Which makes the red square look like example 2.
Example 1:
Example 2: (current state)
Does anyone know any CSS tricks to center the fixed div to the content area, and not to the viewport. Maybe using calc or more margin on the left?
Code Pen
Here the code pen which demonstrates example 2
<div class="sidebar"></div>
<div class="content">
<div class="content-body">
<p>Content in here</p>
</div>
</div>
<div class="popup">
<p>This should be centered on content instead of the viewport</p>
</div>
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 250px;
background-color: #000;
}
.content {
width: calc(100% - 250px);
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
}
.content-body {
width: 100%;
height: 2000px; /* to create some scrollable page*/
max-width: 1200px;
margin: 1em auto;
background-color: #afafaf;
}
.popup {
position: fixed;
width: 100%;
max-width: 1200px;
top: auto;
bottom: 0;
left: 0;
right: 0;
background-color: red;
margin: 1em auto;
}
https://codepen.io/finiox/pen/mdmJVwK

Answer 1

If I understood your question correctly, you can just change left: 0 to left: 250px for .popup

Answer 2

If the sidebar has a static width. Which is has in this case. You need to use the transform property and transform it to half the width of the sidebar.
transform: translate(125px, 0);
Optionally you can store the sidebar width in a root variable and use calc to get half the width.
:root {
--sidebar-width: 250px;
}
.popup {
transform: translate(calc(var(--sidebar-width)/2), 0);
}

Answer 3

if the sidebar is not always visible, then add a class (ex: is-sidebar-active) then you can select popup using something like .is-sidebar-active + nextSibling + nextSibling. Then just add left: SIDEBAR_WIDTH into popup.
Example:
:root {
--sidebarWidth: 250px;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: var(--sidebarWidth);
background-color: #000;
}
.content {
width: calc(100% - 250px);
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
}
.content-body {
width: 100%;
height: 2000px; /* to create some scrollable page*/
max-width: 1200px;
margin: 1em auto;
background-color: #afafaf;
}
.popup {
position: fixed;
width: 100%;
max-width: 1200px;
top: auto;
bottom: 0;
left: 0;
right: 0;
background-color: red;
margin: 1em auto;
z-index: 9;
}
.is-sidebar-active + .popup {
width: calc(100% - var(--sidebarWidth));
left: var(--sidebarWidth);
}
<div class="sidebar is-sidebar-active"></div>
<div class="popup">
<p>This should be centered on content instead of the viewport</p>
</div>
<div class="content">
<div class="content-body">
<p>Content in here</p>
</div>
</div>