Having trouble mixing absolute and relative positions - html

Question

I am wondering how I should organize things. I want my screen to be organized like this, and to be responsive:
So here is what I did:
.container-map {
position: relative;
}
.map-background {
z-index: 10;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
}
.map-filter {
z-index: 100;
margin-left: 10%;
margin-top: 5%;
position: absolute;
}
.map-search-results{
position: absolute;
margin-top: 50%;
width: 100%;
}
<div class="container-map">
<div class="map-background"></div>
<div class="map-filter"></div>
<div class="map-search-results"></div>
</div>
It is working for the map and the filter, but for the search-results section, this seems very dirty to me.
It seems like adding a div around map-background and map-filter should be the solution, but how do I make its position "more important" than the absolute positions of the two other divs?

Answer 1

It's not clear what you mean by "more important" but I think I know what you mean. One of the main issues is the fact that the top map background and map filter are not positioned together but independently, and then just aligned with absolute positioning. This makes the style brittle and prone to errors from changes - whether that be changes in code or change in viewport etc.
Instead this might be the kind of thing you are after:
.top-container{
height:50vh;
position:relative;
}
.map-background {
height: 100%;
background-color:yellow;
outline:2px solid yellow;
}
.map-filter {
position: absolute;
top:15%;
left:10%;
min-height:50px;
min-width:200px;
background-color:lightblue;
outline:2px solid lightblue;
}
.map-search-results{
height:50vh;
background-color:red;
outline:2px solid red;
}
<div class="container-map">
<div class="top-container">
<div class="map-background">
Background
</div>
<div class="map-filter">
Filter
</div>
</div>
<div class="map-search-results">
Search Results
</div>
</div>
Now the top section is held in it's own container and only the filter is positioned absolutely, but that's absolutely relative to the wrapping container. Remember that position: absolute will position an element relative to the nearest ancestor with position: absolute or position: relative.[1]
This means that the top section is effectively 'grouped' and if the container is repositioned, whether that be with new CSS rules, changes to the DOM, changes to the the outer dimensions etc etc, then all the children should also be naturally repositioned as well (barring any other complications).
I have also cleaned up the code somewhat.
Your height definitions weren't working because a percentage height needs a parent with absolute height to work. Instead I have defined the two main blocks as having height: 50vh but you can set it to whatever you need.
There's also no need for z-index in this case (and z-index with absolute positioning is a recipe for confusion). The map-filter is the only thing 'on top' of something else and that will appear on top anyway since it is absolutely positioned and the map-background is not.
So if you take out the code I created for demonstration this is the core CSS:
.top-container{
height:50vh;
position:relative;
}
.map-background {
height: 100%;
}
.map-filter {
position: absolute;
top:15%;
left:10%;
}
.map-search-results{
height:50vh;
}

Answer 2

You don't need position: absolute for any of these:
<div class="container-map">
<div class="map-background">
<div class="map-filter"></div>
</div>
<div class="map-search-results"></div>
</div>
.container-map {
width: 400px; /*set as much as you like */
}
.map-background , .map-search-results {
display: block;
height: 50%;
}
.map-background {
padding: 15px; /* set as much as you want - to affect the height/position of .map-filter */
}
.map-filter {
width: 200px;
height: 100%; /* top/bottom padding of [.map-background] will create the height differential here */
}

Answer 3

First thing you need to know is when dealing with absolute it's better to use left, right, top & bottom,
Second thing you need to know is the relatively positioned element should have width and height in order to place the absolute positioned item inside it
Consider reading this article to know what is the difference between this properties ( relative & absolute )https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I tried to make an example like the image in your question :
.container-map {
position: relative;
background:#000;
width:100vw;
height:100vh;
}
.map-background {
z-index: 10;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background:#ff0000;
}
.map-filter {
z-index: 100;
left: 5%;
top: 5%;
width:130px;
height:40%;
background:orange;
position: absolute;
}
.map-search-results{
position: absolute;
top: 50%;
width: 100%;
height:50%;
background:#00ff00;
}
<div class="container-map">
<div class="map-background"></div>
<div class="map-filter"></div>
<div class="map-search-results"></div>
</div>