Css position absolute not working on <img> tag and also not responsive-CodePudding

Need to place a button on img tag hence made button position absolute and img position relative. But its not working and is also not responsive. Attaching code.

 <div >
   <div >
        <div  *ngIf="!impactData">
          <img  src="../../../assets/Images/Spider graph ring 1.jpg">
          <button  *ngIf="!mainService.permission['Impact Redo Button']"      (click)="startImpactAssessment()">
            Start Impact Assessment</button>
        </div>
        <div *ngIf="impactData">
          <app-radar-chart [data]="graphData" [graphColor]='graphColor'></app-radar-chart>
        </div>
      </div>
</div>

.impact-assessment {
   width: 100% !important;
    border: 1px solid lightgrey;
    border-radius: 12px !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5) !important;
    color: $grey;
    display: flex;
    flex-direction: row;
    background-color: #FFFFFF;
    padding: 2em !important;
}

.chartArea{
  width: 30%;
}

.impactArea{
  width: 70%;
}

.spiderChart {
  height: 280px;
  width: 280px;
  position: relative !important;
}

.impactbtn {
  position: absolute;
  z-index: 1;
  top: 40%;
  background: #701167;
  border-radius: 24px;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  height: 35px;
  width: 200px;
  border: 0;
}

I need a card with two partitions (1:3) left side with the image (button on top) and right side with text. Right now the button is moving to the right of the image and I could bring it on top using 'top:50%' and 'right:40%' property but its not responsive.

CodePudding user response：

Since you didn't provide any reproducible code, here is my solution:

To make the button appear on top of the image and to make it responsive, you can use absolute positioning and a container element with a relative position. Here is an example of how you can do this:

<div >
  <div >
    <div *ngIf="!impactData">
      <div >
        <img  src="../../../assets/Images/Spider graph ring 1.jpg">
        <button  *ngIf="!mainService.permission['Impact Redo Button']" (click)="startImpactAssessment()">
          Start Impact Assessment
        </button>
      </div>
    </div>
    <div *ngIf="impactData">
      <app-radar-chart [data]="graphData" [graphColor]='graphColor'></app-radar-chart>
    </div>
  </div>
</div>

.impact-assessment {
  width: 100% !important;
  border: 1px solid lightgrey;
  border-radius: 12px !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5) !important;
  color: $grey;
  display: flex;
  flex-direction: row;
  background-color: #FFFFFF;
  padding: 2em !important;
}

.chartArea {
  width: 30%;
}

.impactArea {
  width: 70%;
}

.image-container {
  position: relative;
  /* Add other styles for the container here */
}

.spiderChart {
  height: 280px;
  width: 280px;
  /* Add other styles for the image here */
}

.impactbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #701167;
  border-radius: 24px;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  height: 35px;
  width: 200px;
  border: 0;
  /* Add other styles for the button here */
}

In this example, the image-container element has a relative position, which allows the impactbtn element to be positioned absolutely within it. The top, left, and transform properties are used to center the button within the container. This should make the button appear on top of the image and make it responsive.