Layer one image on top of another using z-index

I'm having trouble layering one image on top of another in my code.

Here is 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 class="mobile">
  <p style="color: blue; font-size: 40px;">Overlay image</p>
  <div class="neer">
    <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 have chosen not to use margin-top or margin-bottom as it may affect the responsive layout, causing potential issues with its structure.

javascripthtmlcssimageoverlay

Answer №1

To create an overlay effect with two images, place both images inside a div element that has the CSS property position: relative;. Then add the following class to the image that you want to be on top:

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


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

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

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 30px;
}
<div class="container">
  <p style="color: blue; font-size: 40px;">Overlay image</p>
  
  <div style="position: relative;">
    <img src="https://place-hold.it/338x280" />   
    <img class="overlay" src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
  </div>
</div>

Answer №2

There are various methods to achieve this outcome. One straightforward approach utilizing your provided code is to eliminate the flex style from the mobile section and transfer it to the 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 class="mobile">
  <p style="color: blue; font-size: 40px;">Overlay image</p>

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

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

An alternative method is to place both images within a single div and assign 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 class="mobile">
  <p style="color: blue; font-size: 40px;">Overlay image</p>

  <div class="container">

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

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

</div>

If the reason for implementing this change is known, there may be an even more optimal solution available.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to bring in data from a .d.ts file into a .js file that shares its name?

I am in the process of writing JavaScript code and I want to ensure type safety using TypeScript with JSDoc. Since it's more convenient to define types in TypeScript, my intention was to place the type definitions in a .d.ts file alongside my .js fil ...

javascripttypescripttypesjsdoc

Is the Positioning of JS Scripts in Pug and Jade Documents Important?

Have you ever wondered why a page loads faster when certain lines are placed at the end of the tag instead of inside it? script(src="/Scripts/jquery.timeago.js") This phenomenon is often seen in code like this: //Jade file with JQuery !!! 5 html(lang=" ...

javascripthtmlnode.jsexpresspug

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

I am trying to make a URL call from JavaScript with a single parameter, and the URL should respond to that specific request. Here is an example of the response format: {"success":true, "result": {"token":"4fc5ef2bd77a3","serverTime":1338371883,"expireT ...

javascriptajaxhtml

Discover the best method for retrieving or accessing data from an array using Angular

In my data processing task, I have two sets of information. The first set serves as the header data, providing the names of the columns to be displayed. The second set is the actual data source itself. My challenge lies in selecting only the data from th ...

javascriptangulartypescriptrxjs

Navigation buttons that move the user either up or down the page

I am a beginner in programming and I wanted to create two buttons for my webpage. One button should appear when the page is scrolled more than 300px and take the user to the top, while the other button should be displayed immediately and scroll the user to ...

javascripthtmlcssscrollonclick

jsonAn error occurred while attempting to access the Spotify API, which resulted

Currently, I am working on acquiring an access Token through the Client Credentials Flow in the Spotify API. Below is the code snippet that I have been using: let oAuthOptions = { url: 'https://accounts.spotify.com/api/token', method: ' ...

javascriptjsonreactjsauthenticationecmascript-6

Certain Bootstrap 5 icons are failing to appear on the screen

I'm encountering an issue with Bootstrap 5 where certain icons are not displaying correctly. The bi-search icon shows up perfectly, but the bi-send icon is not being shown at all. I would usually include this in a code snippet, but it seems that featu ...

htmliconsbootstrap-5

Is there a way to manually add route resolve data to a controller without using automatic injection?

Two routes in my application share a controller, but one route requires data to be resolved before the view loads while the other does not. Here is an example of the routing segments: ... when('/users', { controller: 'UsersCtrl', ...

javascriptangularjs

Identifying text within clicked divs using identical ids

$(document).ready(function(){ $('#peoplelayer').click(function(){ $(this).fadeOut(500); var str = $(this).text(); alert(str); }); }); This is code where I use the same id "#peoplelayer" for all the divs. When on ...

javascriptjqueryhtml

Using jQuery to temporarily disable a div element

I need to implement a timer in a div that will disable it for a specific duration, such as 3 seconds. Here is the HTML code snippet: <div class="answ-container" align="center"> <div class="c_answer" id="1316" name="1" data-rcat-no="1"> ...

jquerycsshtml

Guide on setting up a Redirect URL with React Router

I am aiming to trigger a redirect URL event using ReactJS. Is there a way to achieve this? I have already attempted the following: successRedirect(){ this.transitionTo('/'); } as well as successRedirect(){ this.router.transitionTo ...

javascripthttp-redirectreactjsreact-router

Special Table Spacing

Within my table, I am looking to create spacing between cells without setting padding and/or margin on each individual td. While using the CellSpacing and/or CellPadding properties of the table could be a potential solution, these properties apply space on ...

htmlcsshtml-table

Removing Inline Styles Using jQuery Scroll Event

Whenever I reach the scroll position of 1400 and then scroll back to the top, my chat elements (chat1, chat2, chat3, chat4) receive an "empty" inline style but only for a duration of 1 second. After that, the fadeIn effect occurs again every time I scroll ...

jquerycss

In React, the clearInterval() function does not effectively clear intervals

Currently, I am implementing the following code: startInterval = () => { this.interval = setInterval(this.intervalFunction, 10000) } stopInterval = () => { clearInterval(this.interval) } However, a problem arises when I invoke the stopInte ...

javascriptreactjsnext.js

Manipulate state in parent component from child component using onClick function with React hooks

Hello, I am facing a challenge trying to store data from a modal (child function) within the main (parent) function. Depending on which button is clicked, the modal loads specific HTML content (all buttons perform the same action). export default function ...

javascriptreactjslocal-storagereact-hooksuse-state

JQuery Ajax request produces the message "Insufficient storage to fulfill this operation."

Encountering an error while attempting to pass the result.target of an OnLoad event in FileReader.readAsArrayBuffer call using a jQuery Ajax POST. The POST is not being executed, and this issue seems to be specific to IE, as it functions correctly in Chrom ...

javascriptjqueryajax

Navigating on the horizontal axis within a container with overflow properties

I am trying to insert multiple children-divs into a parent-div. The parent div has a fixed width. The children are set to float left and will overflow the container. I need the ability to scroll along the x-axis. However, when I attempt to do this, the c ...

htmlcss

JavaScript Tutorial: Simplifying Character Ranges for Conversion

I am currently working on adapting code I found here to create a virtual keyboard for a foreign alphabet using an online textarea. Below is the modified code: <textarea id="txt"></textarea> <script src="https://ajax.googleapi ...

javascriptjquery

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

I am encountering an issue where the width of the div remains the same after it has wrapped, causing overlapping. I want the first div to push the second to the right and so on. When I add a 100% width, it makes the width for the smallest div the same as ...

cssreactjsflexbox

Is it possible to center content with Bootstrap?

Is there a different method to center content with empty space on either side? For instance: <div class="col-md-3"></div> <div class="col-md-6"> <div class="form-group"> .... </div> </div> <div class="col ...

csstwitter-bootstrap