Having trouble with z-indexes in Chrome. The orange div should be positioned behind the black div, which it does everywhere except in Chrome. Any solutions? Here is the current situation:
.page {
height:900px;
background:orange;
width:80%;
position:relative;
z-index:8;
top:120px;
}
It is important to note that the z-index should be set in the background class, not the top-img class.
If the background class itself is not positioned above other elements, adjusting the z-index within its descendants will not have any effect.
To see changes in action, visit this fiddle - http://jsfiddle.net/vals/cTf72/
.top-img {
height:100px;
background:black;
position:relative;
z-index:9;
}
I simply transferred the z-index value of 9 from .top-img to .background.
In this scenario, top, page, and background are siblings competing for z-index priority. Once one sibling is chosen, all descendants follow suit. Setting a z-index in top-img is ineffective as it has no sibling competition and cannot impact the parent's (background) z-index.
As mentioned by @vals in the previous response, the current markup setup does not allow for the desired functionality. To address this, I made some modifications to demonstrate how it could be achieved.
To make the page function as intended, I removed the <div class="background"> that enclosed the black bar and image. Additionally, I adjusted the classes for both elements to maintain the same visual effect as before.
You can view the updated version on this jsfiddle link.
Below is the revised HTML and CSS code:
<div class='top-img background'></div>
<img class="background" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJGQ7eqRuhZQqbX1roKW8zBGVHW-VlmQq0uTGCZjDGDHCRljPp" />
<div class='top'>
</div>
<div class='page'>
</div>
And here is the corresponding CSS:
.background {
position:fixed;
width:100%;
}
.top-img {
height:100px;
background:black;
z-index:9;
}
img {
width:100%;
z-index:7;
top : 100px;
}
.top {
position:fixed;
width:60%;
height:60px;
top:60px;
background:yellow;
z-index:10;
}
.page {
height:900px;
background:orange;
width:80%;
position:relative;
z-index:8;
top:120px;
}
I am currently using Swift_mailer in PHP to send out automated emails. Recently, I have been tasked with enhancing the email messages by including contact information. To enable users to provide feedback, I want to utilize the html 'mailto' funct ...
After trying to transfer array elements between different PHP scripts using session variables, I encountered a problem where nothing was being displayed. Below are the contents of my two PHP files. file1.php <?PHP session_start(); $SQL = ...
Why when I click the register button, it redirects me to the register_db.php page instead of sending the data to the database and keeping me on the same register.php page? I want the data to be sent to the database without changing the webpage. register.p ...
Before transitioning to angular development, I had experience working with vanilla Javascript. I encountered a challenge when trying to modify the css properties of specific elements using Typescript. Unfortunately, the traditional approach used in Javascr ...
<div class="form-group mb-3"> <label for="">item 1 </label> <select name="item1" class="js-example-basic-single" style="width: 100%;"> ...
I'm struggling to understand why my custom CSS file isn't able to override the Bootstrap CSS. I know that my new CSS class should have higher priority than Bootstrap's, but for some reason, it's not working as expected. Here's the ...
I need help fixing my JavaScript code. The program should prompt the user for a password using a dialogue box, and then validate that the input has no spaces. If a space is detected, the program should stop and display an alert saying "Invalid, contains a ...
I've been searching for a custom third-party library to meet a specific need I have. Here's a snapshot of the dropdown in question. I looked into https://www.npmjs.com/package/multiselect-react-dropdown but it doesn't cover this particular s ...
Despite spending hours reading numerous online sources, I am still struggling to fully grasp the CSS/HTML box model. Specifically, I am attempting to create sections with a ratio of 3:2, where 3 represents the width and 2 represents the height. https://i.s ...
I'm having trouble with my code and can't seem to figure out why it's behaving this way. When I try to update a recordset, the page reloads upon hitting the submit button and multiple URL parameters appear in the address bar. There are two ...
Looking for some assistance with a simple form set up; <div class="formholder"> <form action="column1.php" method="post"> <input type="text" placeholder="URL:" name="url" required=""><br> <input type="t ...
Essentially, I have a straightforward code snippet provided below. It is necessary to update the amount and email whenever those are modified by someone. UPDATE: Credit goes to @ellipsis. Your version is close to perfect, except for the data transmission ...
Encountering an issue with my signalr/hub while fetching dashboard data. I'm using 2 browsers to access data based on dates. However, when searching for July on browser 1 and then switching to another month on browser 2, the data in browser 1 gets upd ...
I have come across websites that use a technique where when a message box pops up, the rest of the webpage dimmed to emphasize the message. Currently, I am working on building a website using Microsoft Web Developer 2010, specifically an ASP.net site. On ...
I am in the process of creating a website for my mother, using my limited knowledge. Despite numerous attempts, I have not been able to achieve the desired outcome. Currently, the website looks like this: https://i.stack.imgur.com/ItOcp.jpg However, I e ...
Having some trouble incorporating a carousel on my landing page. I can see the first image, but the carousel isn't sliding to the next one. I copied the template from bootstrap-carousel, but even the data-bs-interval attribute isn't responding. M ...
I'm facing an issue where a div needs to move upwards when hovering over it. To see an example, take a look at this JSfiddle. The desired outcome is as follows: As illustrated, the right div is the one being hovered. I have attempted to create this ...
Is there a reliable software out there that can effectively convert video files (such as avi, flv, etc.) to HTML5 supported ogg/ogv and mpeg4 formats? I have tested a few options but unfortunately none of them seem to get the job done correctly. ...
For my friend's personal site, I am using Bootstrap 4 to create a gallery within a modal. I have managed to make the images expand on hover, but I am facing an issue where the images get cut off at the edges of the modal when I set the overflow to aut ...
There is a problem with the anchor tag used in my website. The number 619-618-1660 is being displayed when I view the site on Safari browser or an iPhone, even though it is written as (href="tel:619-618-1660"). See the image at the link below for reference ...