CODEWITHSUNDEEP
css
Ivan
Ivan

Reputation: 40648

Absolute positioning inside a div positioned in grid

I am trying out CSS grid layout and currently facing a problem. I would like to use position: absolute for a child of a div positioned in a grid. As you can see below (code snippet) the red box is set with position: absolute and is a child of .left.

How do I make it so that the red box visually stays in the orange div (left side) and doesn't "overflow" in the brown div (right side)?

I have tried setting position: relative to the parent element, without result.

Below is a simplified version showing the problem (you can modify the value to see the separator move) 

html,
body,
section {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.window {
  display: grid;
  grid-template-areas: "first seperator last";
  grid-template-columns: 100px 10px auto;
  /*                     | this one       */
}

.left {
  background: #ff9e2c;
  grid-area: first;
  position: relative;
}

.right {
  background: #b6701e;
  grid-area: last;
}

.separator {
  background: white;
}

.abs-pos {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 100px;
  left: 75px;
}
<section class="window">
  <div class="left">
    <div class="abs-pos"></div>
  </div>
  <div class="separator"></div>
  <div class="right"></div>
</section>

The following is a GIF of the problem: enter image description here PS: In the actual file I have a JS script that allows me to move the .separator div horizontally to change the sizes of the two divs: .left and .right. It basically modìfies the property grid-template-columns: 100px 10px auto of .window therefore resizing the grid.

Upvotes: 2

Views: 5282

Answers (2)

Harry
Harry

Reputation: 4050

Have you tried to give your classes a z-index

  z-index: -1;

Z index sets the stack order And works with positioned elements. I.e absolute, relative, fixed.

So if you can give your .right and or .seperator class a position relative it should work.

 .right {
     position:relative;
     z-index: 1;
}

 .separator {
     position:relative;
     z-index: 1;
 }

 .abs-pos {
     position:absolute;
     z-index: -1;
 }

Upvotes: 1

Don
Don

Reputation: 4157

Setting overflow: hidden; on the .left pane will keep the red box from showing up outside its parent's bounds.

html,
body,
section {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.window {
  display: grid;
  grid-template-areas: "first seperator last";
  grid-template-columns: 100px 10px auto;
  /*                     | this one       */
}

.left {
  background: #ff9e2c;
  grid-area: first;
  position: relative;
  overflow: hidden;
}

.right {
  background: #b6701e;
  grid-area: last;
}

.separator {
  background: white;
}

.abs-pos {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 100px;
  left: 75px;
}
<section class="window">
  <div class="left">
    <div class="abs-pos"></div>
  </div>
  <div class="separator"></div>
  <div class="right"></div>
</section>

Upvotes: 1

Related Questions