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

Applying CSS to inherit styles

I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...

css

The functionality of JQuery TableSorter is not responsive when a user clicks on it

I seem to be running into an issue on my website where I can't get the JQuery TableSorter to work properly. When I attach it to a table for sorting, nothing happens when I click on the headers. The table remains static and unsortable. Here's a s ...

javascriptjquerytablesorter

I encountered an issue where the data I passed to a component ended up being undefined

So here's the scenario: I'm working on a Next.js project where I have a context for modals. In this context, I store modal details in an array called modalBase. Additionally, I fetch data from another context (toolsContext) to pass it to componen ...

javascriptnext.jsaxios

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

As a beginner in HTML website design, I have recently started using HTML, CSS, jQuery, and JavaScript for designing websites. After creating a site with almost forty webpages, the client requirements are changing, requiring changes to be made across all ...

javascriptjqueryhtmlcss

Transform charset X to Unicode using Java

What is the process to convert a specific charset to unicode in Java? We have discussed charsets extensively, but this particular topic has not been covered yet. I have a hex string that follows the criteria length%4==0 (e.g. \ud3faef8e). Typically, ...

javahtmlcharacter-encoding

A guide to efficiently passing props in Quasar 2 Vue 3 Composition API for tables

I am encountering an issue while attempting to create a custom child component with props as row data. The error message "rows.slice is not a function" keeps appearing, and upon inspecting the parent data, I found that it is an Object. However, the props r ...

javascriptvue.jsvue-composition-apiquasarvue-props

Changes to the model cannot be realized unless $scope.$apply is used

Are there alternative methods to achieve the desired model change without utilizing $scope injection in an Angular "controller as" approach within the given setup? The HTML: <div data-ng-controller="Buildings as vm"> <select data-ng-model="vm. ...

javascriptangularjs

Unraveling JSON data retrieved from a MySQL query

After successfully encoding a MySQL result from PHP into JSON, I am now faced with the task of decoding it using JavaScript. Let's assume that my string returned is: [{"0":"x","1":"z"},{"0":"xs","1":"zz"}] I would appreciate some guidance on how to ...

phpjavascriptjson

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide

Apologies for the basic inquiry, but I have created a sudoku grid with the following structure. Modified(Using Tables): <table id="grid" border="1" style="border-collapse: collapse;"> <tr class="row"> ...

htmlcss

Mosaic-inspired image gallery with HTML and CSS styling

Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not require ...

htmlcssblocktilemosaic

Combine iron-page and bind them together

Recently, I've started learning about Polymer and I want to bind together paper-tabs and iron-pages so that when a tab is clicked, the content loads dynamically. After going through the documentation, this is what I have tried: <app-toolbar> ...

javascripttypescriptpolymer

Setting the child elements of a CSS div to have the same width and be larger than the

Welcome everyone to my inaugural post! I hope I've followed the right steps. I'm encountering an issue where I have child divs that need to have equal widths. The #content can sometimes exceed the browser window's width (hence the 3000px), ...

htmlwidthcss

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

javascripthtmlmxgraph

Having trouble with MUI auto import suggestions in my Next.js 13 project on VS Code

I'm currently developing a project using Next.js 13 and have installed MUI. However, I am encountering an issue where VS Code is not providing auto imports from the @mui/material library, as shown in the attached screenshot. https://i.stack.imgur.com ...

javascriptreactjstypescriptnext.jsmaterial-ui

Issue with `npm run watch` failing to compile when the data source is turned

Currently, I am faced with a challenge while working on Laravel and utilizing various node packages for development. The issue at hand is my limited internet connectivity. Every time I attempt to execute npm run watch, it refuses to initiate unless I am c ...

javascriptnode.jsnpmlaravel-5.8

Is it possible to horizontally center an auto-fill grid using only CSS?

I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...

javascripthtmlcsscss-grid

Encountered an error: "switch/mergeAll/flatten is not a valid function" when working with the http driver

As I delve into learning CycleJS, one thing that has caught my attention is the usage of Cycle's HTTP Driver. It seems that in order to reach the stream level, merging the response stream stream with RxJS switch/mergeAll is essential. However, when at ...

javascriptrxjsreactivexcyclejs

Dynamically retrieving markers from the database based on the most recent timestamp of the last loaded batch

I currently have a database where I store marker locations along with their latitude, longitude, type, and timestamp. Right now, my code loads all markers from the database and displays them on the map with different icons based on their type. However, w ...

javascriptjsongoogle-mapstimestampsetinterval

Using Angular 4 to import an HTML file

I am trying to save test.svg in a component variable 'a' or svgicon.component.html. To achieve this, I have created the svgicon.component.ts file. However, it's not working. What steps should I take next? svgicon.component.ts import ...

javascriptangularsvg

What is the best way to retrieve data from the state in react components?

After fetching data from my API using a getAll call, I stored all the values in this.state. However, I am struggling with extracting the arrays or objects from my state. Specifically, I am interested in retrieving the 'id' field from: 0: {id: 1, ...

javascriptreactjs