Sticky div in CSS - html

Question

I would like a div to be pushed down (see "Search while I move the map" in the screenshot), to float above the map, but so that if I use any constants for margin-top or top, then that's relative to the parent div (map), not the browser window.
How can I do so? Website link I have tried to add position: relative; to the parent #map but this is what I get (the map gets hidden):
This is my CSS code:
#map {
#searchCheckboxContainer {
position: absolute;
display: inline-table;
white-space: nowrap;
margin-top: 24px; // sure, this works, but it's 24px *from the browser window*
top: 0px; // any way to make it relative to the parent div (map)?
left: 50%;
transform: translateX(-50%);
background: rgb(255, 255, 255) !important;
}
#searchCheckboxContainer {
height: 40px;
}
}
HTML:
<div id="map" v-cloak>
<div id="searchCheckboxContainer">
<div id="searchCheckbox">
<input id="checkbox" class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Search as I move the map
</label>
</div>
</div>
<div id="mapid"></div>
</div>

Answer 1

Adding as an answer to avoid the comment noise:
All of the #map element children are positioned absolute. So, essentially they aren't in the normal document flow and will not affect the height of the #map div.
You need to add:
position: relative;
height: 100vh (or whatever)
To your #map div.
Then, to your #searchCheckboxContainer, add a z-index: 100 //could be anything but that worked
This will put the box above the map.

Answer 2

I assume you need it to look like that:
In this case you need to modify the following:
#map {
position: relative;
height: calc(100vh - 86px); // The height of header on mobile and you need to add responsive media queries to handle it.
}
#map #searchCheckboxContainer{
position: absolute;
display: inline-table;
white-space: nowrap;
margin-top: 0;
bottom: 0;
left: 0;
top: auto;
transform: none;
background: #ffffff !important;
z-index: 2;
width: 100%;
padding: 15px;
}
#searchCheckbox .form-check-input{
position: relative;
margin-top: 0;
margin-left: 0;
}
#map #mapid{
height: 100%;
width: 100%;
position: absolute;
background-color: yellow;
z-index: 1;
}