CODEWITHSUNDEEP
htmlcss
kibe
kibe

Reputation: 181

How to position a div underneath an absolute positioned div?

I have a grid-container that needs to be in the center of the screen:

#grid-container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

However, I need to put another div underneath it; when I try to do so, the new div shares the same space with grid-container instead of being under it.

I understand position: absolute makes a div ignore the flow of the document. How would I go about making the new div detect grid-container?

EDIT: Oops, more information. Here's the HTML:

<div id="grid-container">

    <div style="text-align:center;" id="grid-settings-container">
        <label contentEditable=true id="size-selector">16</label>
    </div>

    <div id="grid-placeholder"></div>

    <ul id="grid-options">
        <li id="reset" class="button">reset</li>
        <li id="color" class="button">color</li>
        <li id="eraser" class="button">eraser</li>
        <li id="submit" class="button">submit</li>
    </ul>

</div>

<div>
    this should be underneath that grid up there
</div>

And here's how it is right now:

enter image description here

Basically, the text should be under the grid

Upvotes: 0

Views: 77

Answers (2)

Seegy
Seegy

Reputation: 392

I think it would work if you were to wrap both the grid and the text and center the wrapper instead.

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#grid-container {
  width: 300px;
  height: 300px;
  background-color: orange;
}
<div class="wrapper">
  <div id="grid-container">
    This is the grid
  </div>
  <div>
      this should be underneath that grid up there
  </div>
</div>

Upvotes: 1

Sandesh Sapkota
Sandesh Sapkota

Reputation: 798

I think this is what you are looking for. 

#grid-container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 200px;
    width: 200px;
}

.grid-bg{
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: orange;
    z-index: -1;
}
  <div id="grid-container">
      test
      <div class="grid-bg"></div>
  </div>

Upvotes: 1

Related Questions