jasan jasan - 2 months ago 23
CSS Question

How to overlay a flex container with fixed position over another flex container?

This might already be answered on stack overflow, but i looked and followed the found answers but it did not work I want to display header2 at the bottom of the page over header(which i want 100% height and 100%width). If i set those values for header the Mainheader is larger than page(requires scrolling).
The following is the code:



.header {
border: 3px solid orange;
min-height: 100vh;
display: -webkit-flex;
display: flex;
/* -webkit-box-orient: horizontal; */
z-index: 0;
position: relative;
/* position: absolute; */
}
.headerMiddle {
border: 2px solid green;
-webkit-flex: 1;
flex: 1;
}
.header2 {
border: 3px solid blue;
min-height: 10vh;
display: -webkit-flex;
display: flex;
/* -webkit-box-orient: horizontal; */
}
.headerMiddle2 {
border: 2px solid green;
-webkit-flex: 1;
flex: 1;
}
.Mainheader {
border: 3px solid red;
min-height: 100vh;
display: -webkit-flex;
position: relative;
flex-direction: column;
display: flex;
}

<body>
<div class="Mainheader">
<div class="header">
<div class="headerMiddle"></div>
</div>
<div class="header2">
<div class="headerMiddle2">Option 1</div>
<div class="headerMiddle2">Option 2</div>
</div>
</div>


</body>





Also a Code Snippet on JSbin here.

Answer

So here is the gist of what I changed in your code:

  1. Added margin: 0 to body to remove the default margins

  2. box-sizing: border-box to all elements sot that the height and width do not exceed the window ( you may want to consider using calc if you want to show all the borders)

  3. Added fixed position to your header and header2 to position them as per requirement.

snippet below:

body{
  margin: 0;
  }
*{
  box-sizing: border-box;
  }
.header {
    border: 3px solid orange;
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    /* -webkit-box-orient: horizontal; */
    z-index: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    /* position: absolute; */
}


.headerMiddle {
    border: 2px solid green;
    -webkit-flex: 1;
    flex: 1;
}

.header2 {
    border: 3px solid blue;
    min-height: 10vh;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    /* -webkit-box-orient: horizontal; */
}
.headerMiddle2 {
    border: 2px solid green;
    -webkit-flex: 1;
    flex: 1;
}
.Mainheader {
    border: 3px solid red;
    min-height: 100vh;
    display: -webkit-flex;
    position:relative;
    flex-direction:column;
    display: flex;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="Mainheader">
  <div class="header">
    <div class="headerMiddle"></div>
  </div>
   <div class="header2">
      <div class="headerMiddle2">Option 1</div>
      <div class="headerMiddle2">Option 2</div>
  </div>
</div>


</body>
</html>

Let me know your feedback on this. Thanks!