Why is the child element appearing on top of another element even though it has a lower

Today, I decided to dive into z-index and experiment with it. However, I am having trouble understanding the behavior.

Below is a simplified version of the HTML structure:

// content has z-index of 30, pos abs
<div class="content">
    // content-centered has z-index of 32, pos rel
    <div class="content-centered">
        // Text and buttons goes here
    </div>
</div>

// bubbles has z-index of 31, pos abs
<div class="bubbles">
    <div class="bubbles-centered">
        // Bubbles goes here
    </div>
</div>

The intention was to have .content as the background, bubbles on top of the background, and finally the actual content above the bubbles. But what's happening is that the bubbles are appearing over the content layer.

Check out the demo: http://jsfiddle.net/zFFkv/1/

Wait a few seconds for the bubbles to show up above the content. The text cannot be selected nor can you interact with the buttons because the bubble-layer is somehow above the content layer, despite being set below it. Why is this happening? Do child elements not inherit their parents' z-index?

Any thoughts or suggestions?

Answer №1

When it comes to z-indices, they are resolved in relation to their parent element rather than the entire document.

In your scenario, .bubbles will always appear above .content, and this is the key consideration. However, the children within .content can still be arranged relative to each other.

If you want to achieve your desired layout, both .content-centered and .bubbles need to be siblings in the HTML structure.

Answer №2

To avoid the bubbles element from obstructing links below, you can utilize the pointer-events property set to none. However, keep in mind that this may not be well-supported in Internet Explorer.

.bubbles {
     pointer-events: none;
}

Check out the demo here

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

Ensure that a tiny image measuring 1*1 pixel just before the closing </body> tag does not generate unwanted margin

Take a look at this demonstration Even though I have set the <body> to have no margins whatsoever, a 1*1 image at the bottom of the page is causing a significant margin. Adding or removing the current CSS reset does not resolve the issue. What cou ...

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row. <SubMenu ...

What could be causing the bullet not to appear in Internet Explorer 6

It is visible in Firefox, but not in IE (specifically IE6). <style type="text/css"> li { list-style-type:disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; ...

Bootstrap 5.3 does not allow custom background colors to take precedence

Ever since the update to Bootstrap 5.3.1, I've been facing an issue where two custom background colors are not overriding the colors set by Bootstrap, even when using !important. Strangely enough, they were working fine before the update. Here are my ...

The CSS Grid extends vertically beyond its bounds, rather than activating the overflow-y property

Why does the grid blow out in the following snippet? The grid has a lime green border, each child has a dotted red border, and you can see the dotted red extends beyond the lime grid border. The .child2 should be made scrollable to prevent the grid from bl ...

HTML/CSS Inactive: Troubleshooting and Solutions

There seems to be an issue with the :active state, if anyone can spot the problem and provide assistance, it would be greatly appreciated. Here is the HTML code: http://pastebin.com/4wCi3L2Z And here is the CSS code: http://pastebin.com/jZvgdDaA Thank y ...

Removing a style attribute by adding a new class

Currently, I am in the process of designing a website prototype using Twitter Bootstrap. One issue that I have encountered is that when I use the hero-unit class, any color attributes specified in the h1 tags are ignored and only displayed in black. This ...

Tips for achieving a design aesthetic similar to that of the JQuery UI website

On my website, I am using jQuery UI along with the "Smooth Default" CSS theme. However, I have noticed that everything appears larger compared to the jQuery UI website itself. For instance, when looking at the buttons here: http://jqueryui.com/button/ The ...

Strange height problem detected in embedded YouTube video

Currently, I have a page with an embedded YouTube video that is intended to be placed in a container with a variable width. When the video is outside of the container, the aspect ratio appears normal. However, once it is placed inside the container, the he ...

Effective method for centering a navigation bar vertically within a section element without relying on absolute positioning

Let's explore a unique way to vertically center content within a div while steering away from fixed values. Interestingly, the typical solutions don't always work as expected in a section environment. The challenge now is: How can we center the ...

Drop down menus fail to appear after the screen has been resized

Creating responsive menus involves using ordered and unordered lists, along with CSS for styling. I have added a script to dynamically generate dropdown menus, but encountered an issue where nothing appears on the screen upon resizing - only the backgrou ...

Mobile view causes malfunction in Bootstrap Toggle Burger Menu functionality

<nav class="navbar navbar-expand-lg navbar-dark px-2 " style="background-color:#E53935;"> <a class="navbar-brand" href="#">FoodFusion</a> <button class=&quo ...

Enhanced customization of material-ui styles

After exploring various resources on styling overrides, I encountered a unique challenge. I am engaged in crafting styled material-ui components and integrating them across different sections of my application. My objective is to enable the customization o ...

Challenges with utilizing multiple backgrounds in CSS

<!DOCTYPE html> <html lang="en"> <head> <meta name="description" content=""> <meta name="author" content=""> <title>Main Website</title> <link href="css/main.css" rel="stylesheet"> </head> ...

Align items vertically within Bootstrap columns

Looking for a quick solution. Refer to the image below, where I am struggling to align the toggle switch horizontally alongside the bootstrap buttons. My suspicion is that it may be related to the CSS of this customized toggle switch. Despite trying variou ...

Restrict the size of an image within a div by setting a maximum height and allowing the width

While this code snippet functions perfectly in WebKit browsers, it encounters issues when used in IE and Firefox. Unfortunately, due to other necessary functionalities, using the img tag is essential, making background-image an unviable option. Code Snipp ...

Customizing jQuery dialog: What is the best way to change the appearance of the close button?

I am struggling to style the close tag in my jQuery dialog box. I have looked through the documentation and tried various CSS alterations, but nothing seems to be working. Any suggestions or insights would be greatly appreciated. My code is provided below ...

A div positioned to the left is placed beneath another div

I am faced with a design challenge involving two divs. The first div is floated left, while the second div is floated right. In order to achieve a responsive layout, I need the first div to go under the second div when the viewport changes. Both divs conta ...

"Utilizing the 8-column layout feature in Twitter Bootstrap

Is it possible to set up 8 equal columns using the latest version of Twitter bootstrap? I know how to create 4 equal columns but I am struggling with figuring out how to achieve 8: <div class="col-sm-12"> <div class="row"> ...

Offspring containers fail to adjust in size relative to their parent container

I am working with a parent div that contains 5 child divs. The parent div does not fill the entire width of the window, but the 5 children share the same space and properly fill their parent. <div class="parent"> <div class="child ...