I'm trying to overlay a second div over my first div. This is working fine. However, the issue I'm having is keeping all the remaining content in place afterward. Because I'm using positioning to overlay the second div, every element and content after it is not flowing as desired.

I've tried:

1. Using settings related to "clear", "display", "flex" in various areas and that didn't work.
2. Playing with the heights of the containers are other intervening div tags, but that does not always work different responsive browser size behaviors - and it doesn't see correct.
3. Chaning the structure or layout of the divs, but it doesn't fix the ultimate problem.
4. Many other suggestions I've found on this site, however, most only discuss how to do the overlay, but they do not address my specific question about the impact of the other content afterward.

Fiddle:

/

.my-container {
  border: 10px solid black;
  position: relative;
}
.my-div-1 {
  border: 10px solid red;
  background: lightblue;
  height: 100px;
}
.my-div-2 {
  border: 10px solid blue;
  background: white;
  height: 240px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 80%;
}
.my-div-3 {
  border: 10px solid green;
  background: yellow;
  height: 100px;
}

Diagram of what I'm trying to do:

I'm trying to overlay a second div over my first div. This is working fine. However, the issue I'm having is keeping all the remaining content in place afterward. Because I'm using positioning to overlay the second div, every element and content after it is not flowing as desired.

I've tried:

1. Using settings related to "clear", "display", "flex" in various areas and that didn't work.
2. Playing with the heights of the containers are other intervening div tags, but that does not always work different responsive browser size behaviors - and it doesn't see correct.
3. Chaning the structure or layout of the divs, but it doesn't fix the ultimate problem.
4. Many other suggestions I've found on this site, however, most only discuss how to do the overlay, but they do not address my specific question about the impact of the other content afterward.

Fiddle:

https://jsfiddle/ptwonbro/7wg5tpj0/13/

.my-container {
  border: 10px solid black;
  position: relative;
}
.my-div-1 {
  border: 10px solid red;
  background: lightblue;
  height: 100px;
}
.my-div-2 {
  border: 10px solid blue;
  background: white;
  height: 240px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 80%;
}
.my-div-3 {
  border: 10px solid green;
  background: yellow;
  height: 100px;
}

Diagram of what I'm trying to do:

• html
• css

1 Answer 1

CSS-Grid can do that, no need for positioning.

* {
  margin: 0;
}

.my-header,
.my-footer {
  border: 2px solid silver;
}

.my-container {
  border: 2px solid black;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.my-div-1 {
  border: 2px solid red;
  background: lightblue;
  height: 50px;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.my-div-2 {
  border: 2px solid blue;
  background: white;
  height: 120px;
  width: 80%;
  margin: auto;
  grid-column: 1;
  grid-row: 2 / span 2;
}

.my-div-3 {
  border: 2px solid green;
  background: yellow;
  height: 50px;
  grid-column: 1;
  grid-row: 4;
}

<div class="my-header">
  <h1>Header</h1>
</div>
<div class="my-body">
  <div class="my-container">
    <div class="my-div-1">body div 1</div>
    <div class="my-div-2">body div 2</div>
    <div class="my-div-3">body div 3</div>
  </div>
</div>
<div class="my-footer">
  <h1>Footer</h1>
</div>