white-space: nowrap seems to affect inner elements position: absolute - html

Question

I want to have a horizontal list of items, contained in a horizontally scrollable outer-wrapper with a fixed width. The outer-wrapper has a relative position. One of the items contains an absolute positioned div.
When scrolling the outer-wrapper, I was expecting the green overlay to remain at the same position. I thought position: absolute is always relative to the first ancestor with a defined position (which would be the outer-wrapper)?
I am using white-space: nowrap for the #wrapper to get the items in a row.
#outer-wrapper {
position: relative;
width: 300px;
height: 150px;
overflow: scroll;
}
#wrapper {
white-space: nowrap;
display: inline-block;
}
#one {
background-color: red;
}
#two {
background-color: blue;
}
.box {
white-space: normal;
display: inline-block;
width: 200px;
height: 150px;
}
.overlay {
background-color: green;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}
<div id="outer-wrapper">
<div id="wrapper">
<div id="one" class="box">
<div class="overlay"></div>
</div>
<div id="two" class="box"></div>
</div>
</div>
I'd like the markup to remain as it is in the example, although this is not totally fixed.
And I can't really define a fixed width for the horizontal list.

Answer 1

If I've got your question correctly then it is not possible with only HTML and CSS. However you can achieve it with jQuery as follows:
$(function() {
var wrapper = $('#outer-wrapper');
$('#outer-wrapper').scroll(function() {
$('.overlay').css({
'marginLeft': wrapper.scrollLeft()
});
});
});
#outer-wrapper {
position: relative;
width: 300px;
height: 150px;
overflow: scroll;
}
#wrapper {
white-space: nowrap;
display: inline-block;
}
#one {
background-color: red;
}
#two {
background-color: blue;
}
.box {
white-space: normal;
display: inline-block;
width: 200px;
height: 150px;
}
.overlay {
background-color: green;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer-wrapper">
<div id="wrapper">
<div id="one" class="box">
<div class="overlay"></div>
</div>
<div id="two" class="box"></div>
</div>
</div>