How do i position an image at the center of another image in a 2 column division?-CodePudding

OK,so I have a 2 column division layout that requires me to place an image in the center of another in the second column,but when i tried some styling it doesn't work as intended and keeps appearing in the top left corner of my body...

HTML part:

<div >
<div >
  <img  src="assets/images/imageborder.png">
  <img src="assets/images/operation.png">
</div>
<div >
  <h4>Operation</h4>
  <p>We provide customised and well design Standard Operating Procedure for every A farm enabling it to be run
    seamlessly easy and effectively by almost anyone.</p>
</div>

CSS part for columns:

    .Parents {
  display: flex;
  flex-direction: row;
  column-gap: 50px;
  width: 756px;
  height: 300px;
  margin: 0 auto;
}

.child1 {
  width: 50%;
  height: 200px;
  text-align: center;
  color: black;
  margin: 0 auto;
}

.child2 {
  width: 50%;
  height: 200px;
  margin: 0 auto;
}

.Parents p {
  text-align: justify;
  margin-top: 40px;
}

CSS part for image section:

    .IMAGEA1{
  z-index: 1;
}
.Parents img{
  position: absolute;
  top: 25px;
  left: 25px;
  z-index:3;
}

Note: I am trying to use a solution using z-index but it doesnt seem to follow the parent div.

CodePudding user response：

Wrap the images in another div. Then use position: absolute and transform: translate to center them on each other.

.Parents {
  display: flex;
  flex-direction: row;
  column-gap: 50px;
  width: 756px;
  height: 300px;
  margin: 0 auto;
}

.child1 {
  width: 50%;
  height: 200px;
  text-align: center;
  color: black;
  margin: 0 auto;
}

.child2 {
  width: 50%;
  height: 200px;
  margin: 0 auto;
}

.Parents p {
  text-align: justify;
  margin-top: 40px;
}

.Parents .centered-images{
  width: calc(100% - 25px);
  height: calc(100% - 25px);
  position: absolute;
  top: 25px;
  left: 25px;
}

.Parents img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Parents img.IMAGEA1{
  z-index: 1;
}

.Parents img.IMAGEA2{
  z-index:3;
}

<div >
<div >
  <div >
    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile@original_size.jpg/367px-Chamomile@original_size.jpg">
    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Gentiana-clusii-ClusiusEnzian.jpg/254px-Gentiana-clusii-ClusiusEnzian.jpg">
  </div>
</div>
<div >
  <h4>Operation</h4>
  <p>We provide customised and well design Standard Operating Procedure for every HAVVA farm enabling it to be run
    seamlessly easy and effectively by almost anyone.</p>
</div>