Trying to stack to images using CSS-CodePudding

I'm trying to stack these images as shown using CSS and I'm stuck I've tired position absolute and it isn't working hero section of a website for a beauty brand

CodePudding user response：

I'm not exactly sure what you're trying to achieve, but I think you want to stack elements with a position absolute. Try using z-index. With z-index u can specify the position of the z-axis of an element. This only works on elements with a position: absolute. The z-index can also be a negative value. (See example below)

.square {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
}

.circle {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index:2;
  background-color: blue;
  border-radius: 50%;
}

<!--See that even though the square div comes first the circle is on top? 
This is cause of the usage of the z-index. 
Remove the z-index and the circle will dissapear behind the square.-->

<div ></div>
<div ></div>

)