Having trouble mixing absolute and relative positions

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?

I don't think using positioning for this is really necessary.. any reason why you want to use it? — IvanS95, Apr 18 '19 at 15:37
Know that "responsive" isn't a switch you flip; you actually have to do design work, think about how you want things to look at each selected break point, and program those in. — Heretic Monkey, Apr 18 '19 at 16:22
You may want to add color (background and/or border) to your snippet so that people can see what you're talking about. — Heretic Monkey, Apr 18 '19 at 16:25
Thank you very much. By "more important" I meant it has priority. I guess I have a big lack in absolute/relative/fixed positioning, and I am reading about it now :) — Maxiss, Apr 19 '19 at 07:45

ChrisM · Accepted Answer · 2019-04-18T16:25:57.387

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;

}

score 1 · Answer 2 · answered Apr 18 '19 at 15:44

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 */
}

score 1 · Answer 3 · answered Apr 18 '19 at 15:50

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>

Having trouble mixing absolute and relative positions

3 Answers3