the stacking context of elements with z-index and relative positioning

I am currently working on a modal that is toggled using JavaScript.

Within the modal, I am dynamically adding an image using JavaScript. Additionally, there will be a div element overlaying the image to simulate cropping (extract coordinates from the image).

However, I am facing an issue with keeping the image below the modal-crop. Both the modal-crop and the image should be centered within the modal-area.

Due to compatibility requirements with IE9, I am unable to utilize grid or flexbox for layout purposes.

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
}

.modal-area {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  padding: 30px;
  background-color: blueviolet;
  border-radius: 4px;
  box-shadow: 0 0 50px black;
  overflow: hidden;
}

.modal-area img {
  margin-left: auto;
  margin-right: auto;
}

.modal-crop {
  position: relative;
  background-color: aliceblue;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  opacity: 0.2;
  z-index: 2;
}
<div class="modal">
  <div class="modal-area">
    <div class="modal-crop"></div>
    #img will be inserted here using Javascript#
  </div>
</div>

https://i.sstatic.net/Vu0xn.png

csscss-position

Answer №1

To properly position your image, it should be absolutely positioned like so: 

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow: hidden;
  outline: 0;
  min-height: 300px;
}

.modal-area {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  padding: 30px;
  background-color: blueviolet;
  border-radius: 4px;
  box-shadow: 0 0 50px black;
  overflow: hidden;
}

.modal-area img {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.modal-crop {
  position: relative;
  background-color: aliceblue;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  opacity: 0.2;
  z-index: 2;
}
<div class="modal">
  <div class="modal-area">
    <div class="modal-crop"></div>
    <img src="https://lorempixel.com/500/500/">
  </div>
</div>

Answer №2

After reviewing your requirements, I believe I have a good grasp of what you are aiming for. Dealing with the complexities of overlapping elements using absolute positioning across different layers can indeed be quite challenging, especially when considering various browsers.

My suggestion is to opt for a grid layout, which offers simplicity in its setup:

HTML

<div class="modal">
    <div class="modal-area">
        <img src="http://via.placeholder.com/200x200">
        <div class="modal-crop"></div>
    </div>
</div>

CSS

.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: block;
overflow: hidden;
outline: 0;
    }


.modal-area {
  display:grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  justify-items:center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    padding: 30px;
    background-color: blueviolet;
    border-radius: 4px;
    box-shadow: 0 0 50px black;
    overflow: hidden;
}

.modal-area img {
    grid-row: 1/span 1;
    grid-column: 1/span 1;
    z-index:1;
}


.modal-crop  {
  width: 200px;
  height: 200px;
  grid-row: 1/span 1;
  grid-column: 1/span 1;
  background-color: red;
  opacity: 0.2;
  z-index:2;
}

It should be noted that in this approach, the "modal crop" dimensions must match those of the image. However, similar adaptations have proven effective in diverse scenarios, making it relatively easy to adjust for images of any size.

Feel free to experiment: https://jsfiddle.net/9odLnh7r/

Answer №3

It seems the question is a bit unclear, but from what I gather, you are looking to apply this CSS ruleset to your image:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
/*  display: none; */
  overflow: hidden;
  outline: 0;
}

.modal-area {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  padding: 30px;
  background-color: blueviolet;
  border-radius: 4px;
  box-shadow: 0 0 50px black;
  overflow: hidden;
}

.modal-area img {
  margin-left: auto;
  margin-right: auto;
}

.modal-crop {
  position: relative;
  background-color: aliceblue;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  opacity: 0.2;
  z-index: 2;
}

.centerMe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="modal">
  <div class="modal-area">
    <div class="modal-crop"></div>
    <img class="centerMe" src="http://www.budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"> 
  </div>
</div>

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

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

javascriptcsshttps

JavaScript can retrieve the default page name that is hidden within the browser's URL

When a URL is entered without a specific file name at the end, such as "www.google.com," the server typically serves a default file like "index.html" or "default.aspx." In this scenario, if the browser displays "www.google.com," I am looking to extract the ...

javascripthtmlcss

Gallery Pagination using JQuery is not working properly

I am experimenting with the jquery easy paginate plugin on a separate page of my Blogspot. The images are displaying properly, but the pagination and CSS are not showing up. I need to adjust my CSS to make this jQuery pagination work correctly. Can someone ...

javascripthtmljquerycss

The Art of Personalizing a Banner

I am currently experiencing an issue with the width of a specific gadget. My goal is to have the border-bottom line of #customheader span the entire width of any screen size. However, at the moment, the border-bottom is only the width of the blog itself. H ...

htmlcssblogger

IE and Firefox both render CSS styles in their own unique ways

When viewing my website acro.batcave.net on different browsers like IE (Windows 7, IE 11.x) and FF (Windows 7, FF 37.x), I noticed that it appears differently. Chrome seems to have the same display as FF. The CSS file can be found at acro.batcave.net/css ...

css

The FontAwesome icon is not showing up on this particular view, but it displays correctly on a

I'm facing a strange issue: one of my FontAwesome icons is not appearing on the view, even though all the other icons are working fine. I've been trying to figure out why. <a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add ...

htmlcsstwitter-bootstrapfont-awesome

How can you apply an active class using React-Router?

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

cssreactjstypescriptreact-routerreact-router-dom

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

cssangularsass

Steps to display a div element periodically at set time intervals

I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...

javascriptphphtmlcsssetinterval

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction. Greetings all! As a newbie in front-end ...

javascripthtmlcssreactjs

Creating an element in react-draggable with two sides bound and two sides open - here's how!

At the moment, I am facing an issue where the element is restricted from moving outside of the container with the class of card-width-height. My goal is to have the right and bottom sides bounded within the container while allowing the element to move beyo ...

javascriptcssreactjsecmascript-6jsx

Identify the element with the active class name as the primary focus

Can anyone assist with this issue? Below is an example of the code I am working with: import React, { useRef, useEffect } from "react"; function App() { const inputRef = useRef(null); useEffect(() => { const testElement = document.qu ...

htmlcssreactjsjsx

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

javascripthtmlcssasp.net-mvcrazor

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

I'm currently developing a React App that functions as a calendar, allowing users to click on specific days displayed as large squares to view information for that day. For accessibility purposes, I initially considered using <button> elements b ...

javascripthtmlcssreactjsaccessibility

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

cssreactjs

Updating the Scale of the Cursor Circle on my Portfolio Site

I attempted to find tutorials on creating a unique circle cursor that can hide the regular mouse cursor as well. After implementing it with a difference blend mode, I encountered an issue where I wanted the scale to change when hovering over a link. The ...

javascripthtmlcsshovercss-transitions

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

javascriptjqueryhtmlcss

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

javascripthtmlcssrazor-pages

Placing divs in rows and columns at specific breakpoints

I have a footer with two divs that I need to be centered and side by side. When the screen size reaches 960px, I want the second div to move below the first one while still staying centered. Does anyone know how to achieve this? Below is my code snippet: ...

htmlcssflexbox

The tooltip being displayed is plain and lacks any design elements

When I hover over my a element, only a simple tooltip appears without any styling, unlike what is shown in the Bootstrap documentation. (I am creating the a element using JavaScript) HTML <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcssbootstrap-5jquery-ui-tooltip