0

How to shift a child block? How to shift the blue block so that it stretches the parent block?

.main {
  width: 400px;
  min-height: 300px;
  background: red;
  position: relative;
}

.preMain {
  width: 60px;
  height: 60px;
  background: blue;
  position: absolute;
  top: 350px;
}
<div class="main">
  <div class="preMain">
  </div>
</div>

Current Result

Desired Result

Penny Liu
  • 15,447
  • 5
  • 79
  • 98

2 Answers2

1

Your issue is that your child block has position: absolute; meaning it no longer affects the parent div. If you want to shift the child block down but still have it affect the parent block you need to change the position of the child. Try something like this:

.main {
  width: 400px;
  min-height: 300px;
  background: red;
  position: absolute;
}

.preMain {
  width: 60px;
  height: 60px;
  background: blue;
  position: relative;
  margin: 350px 0px 10px 10px;
}

Admittedly not a perfect solution but you should be able to achieve the result you're looking for.

Alternately, look to this post here

Hope this helps.

Calvin Bonner
  • 540
  • 2
  • 16
0

You are using position: absolute, which allows to use bottom and left to position the element correctly.

.main {
  width: 400px;
  min-height: 300px;
  background: red;
  position: relative;
}

.preMain {
  width: 60px;
  height: 60px;
  background: blue;
  position: absolute;
  bottom: 10px;
  left: 10px
}
<div class="main">
  <div class="preMain">

  </div>
</div>
user1987
  • 231
  • 1
  • 6
  • I think they wanted the parent to stretch down to wrap around the child at a set position. Setting bottom and left means the child is not in the desired position and is instead still inside the confines of the parent. – Calvin Bonner Apr 29 '20 at 16:34