CODEWITHSUNDEEP
htmlcss
andy_f96
andy_f96

Reputation: 7

Absolute positioned child should rezize like parent

Is there a way to resize the child element like the parent? I want to achieve something like this:

Before resize: https://i.sstatic.net/UL02w.jpg

After resize: https://i.sstatic.net/XLJbZ.jpg

The yellow box should stay on the marked position(red mark) when resized.

I have already tried to make my .imageDiv relative and .box absolute with the position(bottom 100px; right: 200px) I want.

.container{
  width: 100%;
  height: 100%
}

.imageDiv{
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("linkToMyImage");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.box{
  position: absolute;
  bottom: 100px;
  right: 200px;
  height: 100px;
  width: 100px;
  background: yellow;
}

My HTML is this:

<div class="container">
  <div class="imageDiv">
    <div class="box"></div>
  </div>
</div>

The funny part is when I zoom out(ctrl + mousewheel), it sits on the right spot but when I resize it small it doesnt stick on the same position where it should be.

Upvotes: 0

Views: 36

Answers (1)

hisablik
hisablik

Reputation: 111

use %- values in .box for width and height, like:

.box{
  position: absolute;
  bottom: 100px;
  right: 200px;
  height: 40%;
  width: 50%;
  background: yellow;
}

Upvotes: 1

Related Questions