Absolute positioning inside a div positioned in grid - css

Question

I am trying out CSS grid layout and currently facing a problem. I would like to use position: absolute for a child of a div positioned in a grid. As you can see below (code snippet) the red box is set with position: absolute and is a child of .left.
How do I make it so that the red box visually stays in the orange div (left side) and doesn't "overflow" in the brown div (right side)?
I have tried setting position: relative to the parent element, without result.
Below is a simplified version showing the problem (you can modify the value to see the separator move)
html,
body,
section {
height: 100%;
margin: 0px;
padding: 0px;
}
.window {
display: grid;
grid-template-areas: "first seperator last";
grid-template-columns: 100px 10px auto;
/* | this one */
}
.left {
background: #ff9e2c;
grid-area: first;
position: relative;
}
.right {
background: #b6701e;
grid-area: last;
}
.separator {
background: white;
}
.abs-pos {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 75px;
}
<section class="window">
<div class="left">
<div class="abs-pos"></div>
</div>
<div class="separator"></div>
<div class="right"></div>
</section>
The following is a GIF of the problem:
PS: In the actual file I have a JS script that allows me to move the .separator div horizontally to change the sizes of the two divs: .left and .right. It basically modìfies the property grid-template-columns: 100px 10px auto of .window therefore resizing the grid.

Answer 1

Setting overflow: hidden; on the .left pane will keep the red box from showing up outside its parent's bounds.
html,
body,
section {
height: 100%;
margin: 0px;
padding: 0px;
}
.window {
display: grid;
grid-template-areas: "first seperator last";
grid-template-columns: 100px 10px auto;
/* | this one */
}
.left {
background: #ff9e2c;
grid-area: first;
position: relative;
overflow: hidden;
}
.right {
background: #b6701e;
grid-area: last;
}
.separator {
background: white;
}
.abs-pos {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 75px;
}
<section class="window">
<div class="left">
<div class="abs-pos"></div>
</div>
<div class="separator"></div>
<div class="right"></div>
</section>

Answer 2

Have you tried to give your classes a z-index
z-index: -1;
Z index sets the stack order And works with positioned elements. I.e absolute, relative, fixed.
So if you can give your .right and or .seperator class a position relative it should work.
.right {
position:relative;
z-index: 1;
}
.separator {
position:relative;
z-index: 1;
}
.abs-pos {
position:absolute;
z-index: -1;
}