Overlay one image into another with z-index-CodePudding

I am trying to overlay one image into another but it not working.

My code

body {
  background: #000000 50% 50%;
  height: 100%
  width:100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.neer {
  z-index: 100;
  position: absolute;
}

.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 30px;
}

<div >
  <p style="color: blue; font-size: 40px;">Overlay image</p>
  <div >
    <img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />

  </div>
  <div>
    <img src="https://place-hold.it/338x280" />
  </div>
</div>

I am not using margin-top or margin-bottom because i am looking in responsive. defining margin sometime break the layout in different structure.

CodePudding user response：

Place both images inside a div with position: relative;. Add this class to the image that should be on top:

.neer {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
}

body {
  background: #000000 50% 50%;
  height: 100%
  width:100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.neer {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
}

.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 30px;
}

<div >
  <p style="color: blue; font-size: 40px;">Overlay image</p>
  
  <div style="position: relative;">
    <img src="https://place-hold.it/338x280" />   
    <img  src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
  </div>
</div>

CodePudding user response：

there are many ways to do that. a simple way using your giving code is to remove flex style from mobile and put it in body.

* {
  /* border: 1px solid red; */
}

body {
  background: #000000 50% 50%;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neer {
  z-index: 100;
  position: absolute;
}

.mobile {
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
  height: 100%;
  gap: 30px;
}

<div >
  <p style="color: blue; font-size: 40px;">Overlay image</p>

  <div >
    <img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
  </div>

  <div >
    <img src="https://place-hold.it/338x280" />
  </div>
</div>

a better way is to put both pictures in one div then give them the same position in that div.

* {
  /* border: 1px solid red; */
}

body {
  background: #000000 50% 50%;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.neer {
  z-index: 100;
  position: absolute;
}

.mobile {
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
  height: 100%;
  gap: 30px;
}

<div >
  <p style="color: blue; font-size: 40px;">Overlay image</p>

  <div >

    <div >
      <img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
    </div>

    <div >
      <img src="https://place-hold.it/338x280" />
    </div>
  </div>

</div>

If we know why you want to do this, there might be a better way.