1

I'm trying to make an overlap form div (blue) by activity-indicator div (yellow). Both containers should fill all available spaces of parent div, but yellow one (activity indicator) should overlap blue one (input form). I've tried to use position: absolute for activity div, but then I'm loosing parent width and height. What I'm doing wrong and how can it be fixed? 

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: aquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
}

.root-wrapper {
  width: 300pt;
  height: 440pt;
  display: flex;
  flex-direction: column;
  background-color: gray;
}

.logo {
  height: 80pt;
  background-color: green;
}

.content-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: lightcoral;
  padding: 20pt;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.input-form {
  position: relative;
  flex: 1 1 auto;
  background-color: rgb(60, 109, 173);
  z-index: 2;
}

.activity-indicator {
  position: relative;
  flex: 1 1 auto;
  background-color: yellow;
  z-index: 9;
}
<div class="root-wrapper">
  <div class="logo"> </div>

  <div class="content-container">

    <div class="activity-indicator">
    </div>

    <div class="input-form">
    </div>
  </div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
igor_alefirenko
  • 168
  • 3
  • 11
  • 3
    Overlapping is tricky in flexbox. Absolute positioning is a logical, but deficient, solution. This is because absolute position removes the flex item from the document flow, causing it to ignore most flex properties. Consider CSS Grid: https://stackoverflow.com/a/43919551/3597276 – Michael Benjamin Jan 06 '20 at 20:28

1 Answers1

-1

An easy way would be to nudge .input-form up with: 

position: relative;
top: -100px;
margin-bottom: -100px;


html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: aquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
}

.root-wrapper {
  width: 300pt;
  height: 440pt;
  display: flex;
  flex-direction: column;
  background-color: gray;
}

.logo {
  height: 80pt;
  background-color: green;
}

.content-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: lightcoral;
  padding: 20pt;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.input-form {
  position: relative;
  top: -100px;
  margin-bottom: -100px;
  flex: 1 1 auto;
  background-color: rgba(60, 109, 173, .5);
  z-index: 10;
}

.activity-indicator {
  position: relative;
  flex: 1 1 auto;
  background-color: yellow;
  z-index: 9;
}
<div class="root-wrapper">
  <div class="logo"> </div>

  <div class="content-container">

    <div class="activity-indicator">
    </div>

    <div class="input-form">
    </div>
  </div>
Marc Barbeau
  • 826
  • 10
  • 21