Positioning div using absolute and relative positioning commands aren't working on second utili-CodePudding

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  src="https://i.pinimg.com/222x/ec/c6/f2/ecc6f20889bba2976601a3abb029183c.jpg">
        <div >&emsp;ToKa&emsp;&emsp; &emsp;Fitness</div>
    </header>
    <div>
        <div ></div>
        <div ></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.

CodePudding user response：

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
        
        src="https://i.pinimg.com/222x/ec/c6/f2/ecc6f20889bba2976601a3abb029183c.jpg"
      />
      <div >&emsp;ToKa&emsp;&emsp; &emsp;Fitness</div>
    </header>
    <div>
      <div ><div ></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;
}

CodePudding user response：

can you add screenshot of how it looks like?