Positioning div using absolute and relative positioning commands aren't working on second utilisation

Question

I am trying to position a div over another by using position: relative; & position: absolute;. I have made use of this successfully previously in the project, however it isn't given the desired outcome/working on the second use of it. All it is doing is displaying the second div under the first.

HTML

<header>
        <img class="header-img" src="https://i.pinimg.com/222x/ec/c6/f2/ecc6f20889bba2976601a3abb029183c.jpg">
        <div class="header-text left">&emsp;ToKa&emsp;&emsp; &emsp;Fitness</div>
    </header>
    <div>
        <div class="offer"></div>
        <div class="sign-in"></div>
    </div>

CSS

header {
    width: 100%;
    height: 120px;
    position: relative;
    border: 2px black solid;
}

img.header-img {
    width: 122px;
    height: 122px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

div.header-text {
    width: 100%;
    position: absolute;
    padding-top: 42px;
    font-family: articulat-cf, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

div.offer {
    width: 100%;
    height:30px;
    position: relative;
    border: 2px green solid;
}

div.sign-in {
    width: 120px;
    height: 30px;
    position: absolute;
    top: 132px;
    right: 4px;
    border:2px red dashed;
    
}

I am aiming for the smaller red div to go on top of the green div above it to the far right. I have tried using top and right to assist with positioning it but to no obvious effect on the program.

Answer 1

position absolute places an element relative to its parent's position. if you want to set the position of div.sign-in absolute, it should have a parent with "relative" position

 <header>
      <img
        class="header-img"
        src="https://i.pinimg.com/222x/ec/c6/f2/ecc6f20889bba2976601a3abb029183c.jpg"
      />
      <div class="header-text left">&emsp;ToKa&emsp;&emsp; &emsp;Fitness</div>
    </header>
    <div>
      <div class="offer"><div class="sign-in"></div></div>
    </div>

and CSS file:

header {
  width: 100%;
  height: 120px;
  position: relative;
  border: 2px black solid;
}

img.header-img {
  width: 122px;
  height: 122px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}

div.header-text {
  width: 100%;
  position: absolute;
  padding-top: 42px;
  font-family: articulat-cf, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
}

div.offer {
  width: 100%;
  height:30px;
  position: relative;
  border: 2px green solid;
}

div.sign-in {
  width: 120px;
  height: 30px;
  position: absolute;
  right: 0;
  border:2px red dashed;
}