Suggestions for automatically adjusting the height and width of a div containing z-indexed content

I'm attempting to automatically adjust the height and width of the parent div that contains three stacked images, but the parent is not adjusting to the dimensions of the content. Even when the div and the last image are on the same z-index, it's causing issues. Here's an illustration of what's happening and what I'd like: I need it to be responsive so I can't use static values. Illustration Link

Here's my code:

.image_holder {
        margin-top: 5em;
      
        overflow: visible;
        background-color: red;
     display:block;
       z-index: -12;
        position:relative;
         border-style: solid;
  border-width: 5px;
  border-color:red;
    }

.image_preview_parent {
    position: absolute;
}


/*----------layers start---------*/
.layer_Back {
    z-index: -12;
}

.layer_Camera {
    z-index: -11;
}

.layer_Logo {
    z-index: -10;
}
<div class="image_holder">
  <img class="image_preview_parent layer_Logo" src="https://www.transparencyatwork.org/assets/fallback/employers/logo/thumb_default-9fbd6d06cb43649ddc8bfd34eb4b1192396a73474ce3c27cb5830b9edf86ae23.png" />
 <img class="image_preview_parent layer_Camera" src="https://freepngimg.com/thumb/sunglasses/14-2-sunglasses-transparent-thumb.png" />
                            <img class="image_preview_parent layer_Back" src="https://d33wubrfki0l68.cloudfront.net/673084cc885831461ab2cdd1151ad577cda6a49a/92a4d/static/images/favicon.png" />
  </div>

htmlcssz-index

Answer №1

Ensure not all images are set to position:absolute as this will remove them from the flow and result in no in-flow content defining the container height. Keep at least one image with position:relative. You can also consider changing the container to inline-block for a better fit of the content width.

A note on z-index: it only affects the stack order, not the height or width:

.image_holder {
  margin-top: 5em;
  overflow: visible;
  background-color: red;
  display: block;
  z-index: 10; /* parent element that doesn't need to be lower than the child */
  position: relative;
  border-style: solid;
  border-width: 5px;
  border-color: red;
  display:inline-block; /*to fit the width*/
}

.image_preview_parent {
  position:relative;
}
.image_preview_parent:not(:first-child) {
  position: absolute;
  left:0;
  top:0;
}


/*----------layers start---------*/

.layer_Back {
  z-index: -2;
}

.layer_Camera {
  z-index: -1;
}

.layer_Logo {
  z-index: 0;
}
<div class="image_holder">
  <img class="image_preview_parent layer_Logo" src="https://www.transparencyatwork.org/assets/fallback/employers/logo/thumb_default-9fbd6d06cb43649ddc8bfd34eb4b1192396a73474ce3c27cb5830b9edf86ae23.png" />
  <img class="image_preview_parent layer_Camera" src="https://freepngimg.com/thumb/sunglasses/14-2-sunglasses-transparent-thumb.png" />
  <img class="image_preview_parent layer_Back" src="https://d33wubrfki0l68.cloudfront.net/673084cc885831461ab2cdd1151ad577cda6a49a/92a4d/static/images/favicon.png" />
</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

Using the Position Sticky feature in Next.js

As a newcomer to sticky elements, I decided to implement a sticky sidebar in my project. Unfortunately, after copying and pasting some code snippets related to sticky sidebars, it seems that the functionality is not working as expected. <Layout title= ...

javascriptcssnext.jssticky

Show various forms that gather information

Upon selecting an option from the drop-down menu, a certain number of forms will be displayed with captured data. For example: Imagine owning a form with fields such as No. of Applicants, Applicant Name, Telephone, E-mail, etc... If the user selects 2 fo ...

phpjavascripthtmlmysql

Nav bar width remains stagnant despite varying content lengths

My navigation bar looks great with 5 objects, but as soon as I add 3 more, it suddenly drops below the main header. Why is this happening? 5 Objects: 7 Objects: HTML: <div id="header"> <div class="w960"> <div id="logo"> ...

htmlcsswidthnav

Switch up the position of an element every time the page is refreshed

I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...

phpjavascripthtmlcss

Enhance the HTML content using a JavaScript function

Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...

javascripthtml

Using HTML and JavaScript to add variables into the URL within the window.location

I have been struggling to incorporate longitude and latitude into the URL. Despite researching various topics online, I have not found a solution that works for me. Below is the HTML code that showcases the issue. When you click the "Show Position" button ...

javascripthtml

What is the best way to conceal the li elements that exceed a single line?

I have a unordered list containing product information as list items. My goal is to hide the list items that do not fit on a single line based on the screen size. Therefore, the number of products displayed should adjust depending on how many can fit on a ...

jqueryhtmlcss

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

What is the most effective way to transfer a value from the server to a React user interface and incorporate it into the styling of the user interface?

Currently, I am utilizing Python as the backend for my React frontend. The backend is passing in values such as 17 or 87, and I aim to use these values as a percentage on the scale that I am constructing. Currently, the scale starts in the center: https:/ ...

cssreactjsfrontend

HTML/JavaScript - Ways to show text entered into an input field as HTML code

One dilemma I'm facing involves a textarea element on my website where users input HTML code. My goal is to showcase this entered HTML code in a different section of the webpage. How should I approach this challenge? The desired outcome is similar to ...

javascriptjqueryhtmlcssnode.js

Tips for aligning two TD elements with varying lengths in the same row:- Consider setting a specific width for each

Can anyone assist me in properly aligning this structure? I am looking to reduce the height of the "Todays Special" td significantly. The size of this td expands based on the content, for example, if new fruits are added. Any help in resolving this would ...

htmlcss

Challenge with organizing space within a nested layout of flexboxes and CSS grids

Is it possible for my aside element and div.content to evenly split the available space in the container? Additionally, should the grid within div.content take up all the vertical space? The issue I'm encountering is that grid items aren't able ...

htmlcssflexboxcss-grid

The ng-repeat-start feature is not functioning properly across different levels

I am attempting to utilize the ng-repeat-start directive in order to construct a table that resembles the following: The structure of my JSON data is as follows: [ { "name": "Chapter 1", "parts": [ { "text": "Lorem ipsum... 1", ...

javascripthtmlangularjsjsonangularjs-ng-repeat

Conceal one object when the other is revealed?

Is there a way to hide the element with the class .close-button while showing another element with the ID #loading-animation? Can jQuery conditionals help achieve this? For example: if ($('#loading-animation').is(':visible')) { $ ...

javascriptjquerycss

How can I use jQuery to submit a form that has been removed from the document?

Having a popup with a form inside, the issue arises after clicking "save" and the popup disappears. As a workaround, an attempt was made to clone it using var form = $(this).clone();, followed by calling form.submit() but unfortunately, this method did n ...

jqueryhtml

Issues observed when implementing replaceWith() to replace text tags with input field on a web page

Just a simple EDIT request. I want to modify the headers so that when I click on the "edit" icon, the header will change to a text field and the "edit" icon will switch to a "save" icon. $('#editheader').click(function(e){ va ...

jqueryhtmlcss

PHP infinite redirection loop

I have encountered an issue where a user can successfully submit an event to a calendar, but I am facing difficulty redirecting them back to the original page. I attempted to use the following code snippet: header("Location: http://localhost/Project/Vie ...

phphtmlredirectheader

What changes can be made to the HTML structure to ensure that two form tags function separately?

Hey there! I'm currently tackling a web project that involves incorporating two form tags on one page, each with its own distinct purpose. Nevertheless, it appears that the inner form tag isn't behaving as it should. My suspicion is that this iss ...

javascripthtmlejs

numerous sections within a solitary webpage

I need to implement multiple tabs on a single page, how do I modify the code to make this possible? Take a look at the codepen for reference. Here is the jquery code I have written so far: var tabs = $(".tabContainer ul li a"); $(".tabConten ...

javascriptjqueryhtmlcss

Insert information into the <div> element

Sorry if this is a repeated question, but I'm struggling to locate the solution. Is there a way to use jQuery to add content within a div, depending on its current class? For instance, adding "CODE" to a div such as: <div "CODE" class="class_one" ...

jqueryhtml