Tips for inverting the z-index order of stacked divs

On my webpage, I have set up multiple columns enclosed in divs like this:

<div class="first column" style="width:33%; float: left;"></div>
<div class="column" style="width:33%; float: left;"></div>
<div class="last column" style="width:33%; float: left;"></div>

The plugin I am using formats the columns from left to right. However, when I adjust them in CSS to stack on top of each other and use jQuery to move them individually, they end up stacking in reverse order - the last column appears first, while the first column is at the bottom.

Here's a snippet of the CSS code:

#reader .column {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}

I need help changing the stacking order. Would adding a z-index to each div using jQuery be the best solution? I'm not very familiar with JavaScript and worry about its reliability. Is there a simpler way to reverse the stacking order? Below is the jQuery code I am currently using:

$(function(){
    $('#reader-inner').columnize();
    $('.column').click(function() {
      $(this).clearQueue().animate({left:'-550'},500, 'swing');
    });
});

Answer №1

This is the final result I achieved:

$('.column').each(function(index, column) {
        $(column).css('z-index', num - index);
    });

In this code snippet, 'num' represents the total number of columns present on the webpage, along with an additional value determined by the highest existing z-index among other elements.

Answer №2

  1. Calculate the total number of elements.
  2. Subtract a specific amount from that total.
  3. Adjust by multiplying with a number like 10 to avoid z-index values of 1 or 0.

.

var items = $(".somecontainer").children('div').get();
$.each(items, function(idx, element) {
    $(element).css({"z-index": (items.length - idx) * 10 });
});

Answer №3

To ensure proper layering, apply z-index to your .column divs

For a visual example, visit http://example.com/jsfiddle-link

Simply incorporate the provided CSS into your existing code for optimal results.

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

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

Combining multiple jQuery selector objects into one jQuery object

How can I merge two jQuery selectors into one jQuery object? I attempted to use $("#selector","#selector"), but it didn't work and just returned blank. Are there any built-in methods that can help me accomplish this? Is there a way to do it like thi ...

What is the best way to access Sass variables in a different Sass file?

I'm currently working on a WordPress theme and running into an issue with utilizing SASS from another file using the @use method. For those of you who may not know, the @import rule method will soon be deprecated which is why I am trying to implement ...

Creating visually pleasing HTML emails with uniform table data heights

Struggling with Outlook while designing an HTML template. My row has 2 td elements with different content, and setting equal heights is proving to be a challenge. The fixed height on the td causes issues when switching to mobile view in Outlook as text wra ...

Creating columns with equal heights in Bootstrap 3 without compromising on the column padding

I am using a standard Bootstrap 3 CSS setup and I am trying to give columns inside a row the same height. I have been experimenting with using display: table and display: table-cell, which does work, but it seems to add vertical padding to columns with les ...

Customize Joomla Module Styles

Here in the JhotelResrvation Module area, I've identified where the module files are located. However, I'm unable to make changes to the CSS despite trying custom CSS as well. My initial plan was to add padding to the dark-transparent box using c ...

What could be the reason my div is not being hidden in jQuery?

Creating a quiz layout for school is my current project, and I'm just getting started. My goal is to have the questions disappear once the 'next question' button is clicked. The issue arises after the second question because instead of the ...

Learn how to update a form dynamically using the Ajax.BeginForm feature

I am currently working on updating a form within my application using Ajax.BeginForm. The update process is functioning correctly, however, upon executing the function in the controller, it redirects to a view with the controller function name displayed. ...

React JS progress circle bar is a simple and effective way to visualize

Currently, I am in the process of developing a progress circle bar that will function as a timer alongside sliders. Each slide is intended to have its own corresponding progress bar. While I have managed to create the bars individually, I am facing challe ...

Unable to retrieve valid inputs from text fields by utilizing jQuery selectors

Extracting information from text fields is my goal. Specifically, these fields contain dates which consist of three parts: the year, month, and day. The dates are divided into two sections - the first date and the last date, serving as boundaries for a sea ...

Attempting to create a JavaScript class within an HTML document

Having an issue with instantiating a JavaScript class in a separate HTML file. The JavaScript class looks like this: class Puzzle { constructor(fenStart, pgnEnd) { this.fenStart = fenStart; this.pgnEnd = pgnEnd; } } module.exports = Puzzle; ...

Is there a way for me to adjust my for loop so that it showcases my dynamic divs in a bootstrap col-md-6 grid layout?

Currently, the JSON data is appended to a wrapper, but the output shows 10 sections with 10 rows instead of having all divs nested inside one section tag and separated into 5 rows. I can see the dynamically created elements when inspecting the page, but th ...

What is the best way to set a textbox as read-only using jQuery?

Seeking guidance on how to make a textbox readonly using a combination of knockout and jquery. Any advice on achieving this in either knockout or jquery would be appreciated. ...

problem encountered when inserting data (GET method) in a loop using window.location

I'm currently utilizing sailsjs to extract data from the GET parameter within the URL (mydomain.com/prod_master/addsupp). The specific page is /prod_master/addsupp, designed to receive GET parameters for database insertion. In my Javascript code, I ...

Revamped Panel: Unleash the Power of J

I am currently working on a web application that utilizes a gridview with an updatepanel. After updating the gridview, I implemented a jQuery function that is called at the end of GridView1_RowUpdating. ClientScript.RegisterClientScriptBlock(this.GetType( ...

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

What is the best way to adjust a CSS width using the output from a JavaScript function?

I am facing a challenge with a GridView within a div wrapper. The row headers along the left side need to always be visible. So far, this setup is working fine. However, I need the wrapper to have a variable width to adjust to the browser size. Although I ...

The list of data in the Jquery/Ajax success response is showing as "undefined."

I am facing an issue with my AJAX code. It retrieves a list from the controller, but when I display it, I receive an "undefined" message. AJAX $.ajax( { url: "/Panel/OpenOrderDetail1", type: 'GET&a ...

Is there a similar function to $.ajax for React.js and Angular.js?

Can you guide me on how to send data using both React and Angular? Is there a similar function to $.ajax in React and Angular frameworks? I am looking for a post function that works like the one shown below in both React and Angular: $.ajax{ url:"test.p ...

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...