What causes a semiopaque background to show through in an adjacent div?

My webpage consists of three elements. The main element is centered with a beautiful background image, while overlayed on top of it is a second div with a black semi-transparent background to enhance text readability.

In addition, there is a floating div with a solid white background.

However, I have noticed that when the floating div overlaps the semi-transparent div, the black background bleeds through into the float.

I have included my HTML + CSS code below to illustrate this issue. If you resize your browser window, the right floating div will move towards the center div and be affected by the transparency issue.

Any insights or solutions would be greatly appreciated.

<!doctype html>
<head>
<style type="text/css">
#centerDiv {
   height: 300px;
   width: 900px;
   margin: 0px auto 0px auto;
   padding: 0 0;
   background-color: green;
}
#centerInset {
   width: 100%;
   background-color: rgba(0,0,0,0.3);
   position: relative;
   top: 225px;
   height: 74px;
   color: white;
}
#floater {
   float: right;
   width: 200px;
   height: 300px;
   border: 1px solid;
   clear: both;
   background-color: rgba(250,0,0,1);
   border: 1px solid black;
}
</style>
</head>
<body>
<div id="floater">
   <span>some floating text</span>
</div>
<div id="centerDiv">
   <div id="centerInset"><span>Some random text</span></div>
</div>
</body>
</html>

Answer №1

For z-index to work properly, ensure you include both z-index and position in your code. You can check out this example on JSFiddle for reference: jsfiddle

Answer №2

It's quite possible that the situation is this: When you set "centerInset" as relative, the z-index is based on the first parent element with a position other than static.

By setting "centerDiv" to position relative, it should behave as anticipated.

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

How can you ensure that a row of content is accessible by making it clickable in a valid way?

I'm currently working on developing a widget that resembles a clickable bootstrap media object list that is easily accessible. https://getbootstrap.com/docs/4.3/components/media-object/#media-list The original code has the JavaScript click event attac ...

Can you explain the distinction between <P> and <p> tags in HTML?

Currently, I am examining HTML documents by parsing them through Java and I have noticed that the p tag is one of the most frequently utilized tags. While I understand that it is used to create a new line, I am puzzled by the fact that in some documents I ...

Vertically align the content within a div

Here is what I have been working on: http://jsfiddle.net/yisera/2aVpD/ I am trying to vertically center a div inside the .jumbotron-special container. I attempted using display: table; on the parent element and then implementing display:table-cell on th ...

Differences in CSS text padding when rendered in Firefox compared to Chrome and other web

Seeking assistance with a site issue that has been causing frustration. I have spent the entire evening trying to solve it without success. The issue at hand involves modifying tag appearance after each article on my website. The problem arises when viewi ...

The class "pagination pagination-lg" from the link https://angular-ui.github.io/bootstrap/#/pagination seems to be malfunctioning in Bootstrap 4

Just starting out with angularjs and I'm trying to implement pagination using https://angular-ui.github.io/bootstrap/#/pagination. However, I'm facing an issue where the style class "pagination pagination-lg" is not applying properly. I'm cu ...

Tips on building an immersive interactive panoramic website

I have a vision for a website that will simulate being in a room, where users can explore the space with limited panoramic views - allowing them to look up/down 30 degrees and left/right 45 degrees. In addition, I would like to integrate interactive object ...

Implement CSS to globally style material.angular's mat-card by customizing the background color

Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...

Looking to streamline this intricate grid/table structure with the help of Twitter Bootstrap

I've been experimenting with creating a complex layout using tables in Twitter Bootstrap, but I'm struggling to get it just right – especially when it comes to displaying the number 5! Is there a way to achieve the same layout using divs instea ...

Suggestions for resolving the issue of my header being truncated on mobile browsers?

I am facing an issue with my header and need assistance in fixing it. The problem occurs when scrolling down, as it cuts off a part of the header, but returns to normal when scrolling back up. I suspect the hamburger menu might be causing this issue becaus ...

Python Selenium: How to interact with an element nested within multiple HTML tags

Currently, I am working on automating a website using selenium webdriver in Python. However, I have encountered an issue when trying to click on a specific tag. The website that I am attempting to automate is quite old and contains numerous iframes and &l ...

Can a specific element be chosen based on its background color?

Is it possible to change the background color of a child element within a div that has a specific background color using CSS? See my explanation below. For example: .container[background-color=some color] .content { background-color: some other color ...

Enhancing page accessibility through the implementation of shortcuts

Greetings to all members of the community! I am currently in the process of improving a website by implementing better accessibility practices. I have some concerns regarding a page that displays a large number of repeated result blocks, each containing ...

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

Using jQuery, is it possible to retrieve the product name and image dynamically?

I'm currently working on implementing an add to cart functionality using jQuery. When the add to cart button is clicked, the product name and image should be displayed. I can achieve this statically but I need help figuring out how to dynamically retr ...

Can anyone suggest a solution to troubleshoot this issue with CSS Flexbox and absolute positioning?

I'm currently developing a React application featuring flex container cards (referred to as .FilmCard with movie poster backgrounds) within another flex container with flex-wrap. Each card has an item positioned absolutely (an FontAwesome arrow icon). ...

What could be causing my grid to malfunction once the media query is triggered?

I am in the process of creating a straightforward navigation bar. My goal is to have the <nav> content, which includes the navigation links, positioned inside the header along with the logo (a random image from unsplash.it). To achieve this layout, I ...

Once more baffled by the nested boxes, this iteration adorned in vibrant hues and trimmed with a striking border

In a previous inquiry, I sought advice on centering one box within another. However, my attempts this time around have led to some peculiar results. I experimented with two different code variations- one involving a background color and the other utilizing ...

How can you define & specify parameters for iframe using CSS?

Is there a way to style the parameters of an <iframe> using CSS? I am trying to embed multi-track audio from archive.org. For example, like this: <iframe src="https://archive.org/embed/art_of_war_librivox​&playlist=1​&list_height=200 ...

What is the method to ensure background images are loaded with SSL from a different domain?

I run an online store and to improve performance, the images are hosted on a different domain. However, when I switch to secure mode using SSL on certain parts of the website, the background images disappear. Trying to view the image directly in the browse ...

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

While working on creating a responsive website using Bootstrap, I encountered an unusual issue with navigation specifically in Chrome on Android. After some investigation, I found that the same problem exists on Bootstrap's own website. To see the i ...