Troubleshooting a z-index problem involving two divs, one of which is positioned absolutely

I'm trying to understand why my two divs are not behaving as expected. I positioned one with absolute position and set the z-index to the lowest value, while the other has a higher value. However, the absolute position div always remains on top (opposite behavior).

Below is an image for reference:

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

Here is the code snippet:

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

You can see the issue in action in this jsfiddle:

http://jsfiddle.net/rnbd3nek/

javascriptjqueryhtmlcss

Answer №1

To make the necessary changes, remove the style from the parent div and incorporate it into the front div. Make sure to include position:relative in 'THIS SHOULD BE ON FRONT'.

As a result:

<div>
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
      SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
    SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:relative;width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

Note: z-index only applies to positioned elements (position:absolute, position:relative, or position:fixed). -W3Schools, cited from here

Answer №2

Make sure to update the second div as follows:

<div style="position:relative;width:300px;background-color:#0f0;z-index:999999;">
    SHOULD BE VISIBLE IN FRONT. SHOULD BE VISIBLE IN FRONT.
    SHOULD BE VISIBLE IN FRONT. SHOULD BE VISIBLE IN FRONT.
</div>

The z-index property will only take effect if the DIV has a specified position (relative, absolute, fixed etc) - therefore, both divs require a position for the z-index to work correctly.

Answer №3

Here is an example of how your code should be formatted.

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:relative;width:300px;background-color:#0f0;z-index:2;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

Feel free to view the demonstration on Fiddle

Answer №4

Include the CSS rule position: absolute; for the element labeled "SHOULD BE ON FRONT"

Please note: The z-index property only has an effect on elements that have a specified position other than the default value of static.

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
      SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="width:300px;background-color:#0f0;z-index:999999;position:absolute;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

View the Updated Fiddle Here

Answer №5

To modify the stacking order, consider setting the z-index of the initial div to -1, or apply either position:relative or position:absolute to the subsequent div.

Answer №6

Adjust the second div to have a absolute position as well.

<div style="position:absolute;width:300px;background-color:#0f0;z-index:999999;">

Here is how the final code will appear:

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:absolute;width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div

Answer №7

Here is the code snippet for you to check out. It should be positioned in the front, not at an absolute position, as it currently is :P

<div style="position:relative;">
  <div style="position:absolute;width:200px;background-color:red;z-index:1;">
    SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
  </div>
  <div style="width:300px;background-color:yellow;z-index:2;position: relative;">
    SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT.
  </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

Troubleshooting: Converting jSon file to HTML table using JavaScript (jQuery), facing issues with Tablesorter functionality. Seeking advice on how to fix it

I have gone through various methods, researched documentation, forums, and other resources without any luck. I am in the process of developing a cloud file server table for reports (unable to run php). The web page's table is populated from a json fil ...

jqueryjsontablesorter

Trouble submitting lengthy text in HTML form

Creating a simple HTML form <form method="post" action="process.php"> <label>First Name</label> <input type="text" name="first_name" /> <br /> <label>Last Name</label> <input type="text" nam ...

phphtmlforms

Creating a never-ending loop with Vue.js and JavaScript in an asynchronous function

My current approach involves using an async function to interpolate specific elements from the DOM, and while it is effective, I am unable to pass the lint verification. This has led me to seek out alternative solutions. Below is my existing code: async ...

javascriptloopsvue.jsinterpolation

Combining an image and text within a single line in a div container

My goal is to have the envelope image in the same line as the text on the right side: View my CodePen example here .ico{ float:left; margin-right: 5px; vertical-align: middle; I can't seem to get it right - what mistake am I making? ...

htmlcss

Tips for effectively utilizing the else if statement in JavaScript

My current script for submitting a form using jQuery Ajax is mostly functioning as expected. However, I am experiencing an issue where only two responses are being triggered. The loading component works correctly, but the other response statements, includi ...

javascriptjqueryajax

Expanding a UL element to be wider than its containing parent LI

I am facing an issue with my nav bar's dropdown menus. I want the dropdown menus to stretch to accommodate the content inside them, but currently they are limited by their parent element's width. After researching the problem, I've come acr ...

htmlcsshtml-lists

Updating or deleting a specific database row on a website by utilizing jQuery Ajax

Requesting assistance from anyone willing to take a moment to help document how to accomplish this task, for both myself and others. I am seeking a jQuery AJAX method that can update or delete a specified row in a database table. While I understand the PH ...

jqueryajax

Cache AJAX submission on IE8

In my current project, I have implemented a function for uploading and displaying images. The main purpose of this function is to avoid reloading the entire page when uploading and previewing images using AJAX. After uploading an image, it is displayed in ...

jqueryajaxinternet-explorersubmit

Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...

htmlcss

Discover the method for implementing custom CSS using the useEffect hook in React

I am a beginner in the realm of React and I am attempting to apply a custom font style to specific input fields as well as their placeholders. While everything loads successfully, my CustomFontStyle is not being applied. Can anyone shed some light on what ...

cssreactjsuse-effect

Exploring the Differences Between Next.js Script Components and Regular Script Tags with async and defer Attributes

Can you explain the distinctions between the next js <Script /> component rendering strategies such as afterInteracive, beforeInteractive, and lazyLoad, as opposed to utilizing a standard <script /> tag with attributes like async and defer? ...

javascriptreactjsnext.js

The alignment of content in the <a> tag is not centered within a <ul> list item (horizontal menu)

I am new to web development and have recently started creating my first webpage using HTML and CSS. I'm still learning and don't have a strong understanding yet. One issue I'm facing is with centering elements on the page. I have tried usin ...

htmlcss

Using JQuery to apply fadeIn and fadeOut effects, as well as adding or removing classes from div elements

My website utilizes JQuery to toggle classes with display properties for three divs positioned relatively. The side navigation contains three links that, when clicked, display different divs on the page with a fade in/fade out effect. $(document).ready(fu ...

jqueryhtmlcss-positionfadeinfadeout

Steps for assigning each element in the array to a separate variable

My array is dynamic and the length varies, but it looks like this: var coord_list = [[-7.84 , 12.32],[-8.30 , 10.42],[-11.84 , 12.32]....] I am trying to incorporate each element (coordinates) "[-7.84 , 12.32]" into a turf module which is done like this: ...

javascriptarrayscoordinates

Merging two arrays with lodash for a seamless union

Here are two arrays I'm working with: arr1 = [ { "key1": "Value1" }, { "key2": "Value2" }, { "key3": "Test3" }, { ...

javascriptarraysnode.jslodash

Launching a new window and displaying content across 2 separate tabs

Currently, I am incorporating both angular js and javascript within my application. An issue that has arisen is that when I click on the <a> tag, it triggers a method in an angular controller which contains $window.open();. The problem lies in the fa ...

javascriptjqueryangularjs

What potential impact do prolonged Keep-Alive settings have in a NODEJS environment?

Upon conducting load tests, we encountered a 502 (BAD GATEWAY) error which was attributed to specific settings within Express: const app = express(); const server = app.listen(port); server.keepAliveTimeout = 61 * 1000; server.headersTimeout = 65 * 1000; ...

javascriptnode.jsexpressecmascript-6timeout

Troubleshooting: Datatables column filtering not functioning properly

Big shoutout to Stryner for sharing his code on how to disable a search/filter on a specific column in a datatable. It was exactly what I needed. However, I'm facing an issue where the inputs in the bottom TH cells are not triggering any action on bl ...

phpjquerydatatabledatatablesinput-filtering

I'm struggling with creating animations for the bootstrap cards as a newbie. It seems quite complex for me. Can anyone provide guidance on how to achieve this

Explore this template for bootstrap cards here The provided link features a template for bootstrap cards with horizontal sliding animations. I attempted to incorporate only the card properties into my code but encountered issues where the cards overshadow ...

javascriptcsshtmlbootstrap-4

Getting an array of objects using AJAX in ASP.NET MVC

I've been working on generating a list using AJAX and sending it to a controller. Here's what I have so far: var objects = new Array(); here is a loop { var object = { a: 1, b: 2, c: 3 }; objects[i] ...

c#asp.net-mvcjsonjquery