z-index not working as expected (bootstrap)?

I have javascript like this:

<script>
    var doc=document.getElementById("scroll");

    window.addEventListener("scroll", function(event) {
        var top = this.scrollY;
        doc.style.height=`${top+50}px`;
        doc.style.zIndex="2000";
    }, false);
</script>

And the z-index of all other elements are lower. But the doc element is still placed below all the other ones. I read that positioning must be specified? That does not seem to work. I am using bootstrap for layout as well so I can't change the positionings inside css too much.