Is there a way cover an item below with the box shadow of the item above it?
Please take look at:this example
Is there a way to cover the the white box with the shadow of the red box? Thanks in advance.
Give both boxes position: relative and give the red box a higher z-index than the white box:
#d1, #d2 {
position: relative;
}
#d1 {
/* Other styles */
z-index: 1;
}
#d2 {
/* Other styles */
z-index: 0;
}
#red-box { z-index: 2000; }
#white-box { z-index: 1000; }
A higher z-index means that it'll be placed on top of lower z-indexed items.
By the way, very useful that your page reloads itself so I cannot change the stylesheet from Web Inspector to test this.
If you give it (the top one) position:relative it will work.
set position: relative on div 1 before tinkering with z-index
Related
It seems that my dropdown menu its z-index is doing something strange:
https://uma.be/evenement/uma-day-2020-best-media-campaigns/
When you hover the menu-item "Commissions", the dropdown menu goes underneath the image.
I've already checked the z-index of the image itself and the z-index of .mega-sub-menu. Both seems okay to me. The class .mega-sub-menu has an z-index of 999 and the image hasn't got one.
I've added position: relative; z-index: 1; to the image, but that didn't fix the issue.
Is it possible that the Lazy loader does something with the image so that it goes over the sub navigation?
This is because your image and the menu are not in the same stacking context. To ensure that they are in the same stacking context, you will need to find out the parent element of both elements that are siblings to each other.
In this case, that will be:
#wrapper-navbar as the parent element for the dropdown menu
#tribe-events-pg-template as the parent element for the contents of the page (which includes the image)
All you need to do is:
Set the z-index of #wrapper-navbar to 2
Relatively position #tribe-events-pg-template and set its z-index to 1
Updated CSS:
#wrapper-navbar {
position: relative;
z-index: 2;
}
#tribe-events-pg-template {
position: relative;
z-index: 1;
}
After fix is applied:
Problem is your #navbar's z-index property. Increase it or remove it and that should fix your problem
>
#wrapper-navbar {
position: relative;
/* z-index: 1; */
}
Edit the following (added the z-index and position):
#tribe-events-pg-template, .tribe-events-pg-template {
z-index: 0;
position: relative;
margin: 0 auto;
max-width: 1200px;}
I'm helping a client with her website and ran into a problem.
On the responsive version of our menu, when I hover over a menu item with a few sub-menu items, those menu items display, but an element below is showing through the text as well.
The offending element is a testimonial slider that is dynamically updated, so I'm guessing that has something to do with it.
Here's a GIF: overlap problem
Here's a link to the site: http://gogift.com.au/wordpress/
Any help is greatly appreciated!
Thanks,
Paul
You have to set the z-index of the .header-row element. Because it is positioned relative and so it's z-index is the one that counts.
This is the header-row now:
.header-row {
position: relative;
z-index: 2;
}
change it to:
.header-row {
position: relative;
z-index: 2000;
}
you could also set the .header-row to position:static and then change the z-index of the #main-navelement:
.header-row {
position: static;
z-index: 2;
}
#main-nav {
border: none;
border-radius: 0;
position: relative;
z-index: 2000;
width: 100%;
}
Edit: As there is some confusion I want to add a bit more to this answer:
The navigation is in front of the content because there is no z-index set for the <div id="content">and it's children. So any element with a z-index defined will be in front of the content.
As the header-row has a z-index of 2 - the nav is in front of the content.
The problem is that the testimonial-slides have a dynamic set z-index between 90 and 100. As they have no parent with a defined z-index and relative position this z-index will be matched against the .header-row's z-index which is only 2.
One more alternative to solve the problem would be to set the z-index of <div id="content"> to 1.
Looks like it's one of two things: either the z-index of the menu isn't high enough or the background of the menu items is transparent.
I cannot get the orange background behind DONATE at the bottom of my page right to stay put in larger browser windows. I have tried every css trick I can find. Please help!
Thanks,
Janet
http://dev30.ncld.org/
You missed this trick then:
#footer .footer-col-orange {
margin-left: 790px; // adjust accordingly
left: initial;
}
This will keep your donate box relative to the footer element, and not to the left page border and will work on all displays.
The other option is to set the position of #footer .padding element to relative.
There you go :
#footer .padding {
/* padding: 15px 20px 0px 100px; */
width: 1010px;
/* position: absolute; */
margin-left: auto;
margin-right: auto;
background-color: #0A6DA1;
padding-top: 15px;
position: relative; /* First part */
}
#footer .footer-col-orange {
position: absolute;
/* background-position: right; */
right: -2em; /* second part, feel free to put what you want */
}
When you set a position: absolute; to an element, it will pull it out of the HTML flow, and you can give it coordinates (top, left, right; bottom). This coordinates are relative to the first parent with a relative position. As you didn't set any parent element to be the relative, you positioned your element relative to the document.
Your orange box is current positioned absolutely, as you know. This means that is is relative to the browser window. The left edge of that window, because you have `left:900px'. What we want is for it to be relative to the footer, which is centered.
To do this, we need to set the parent container of the orange box to position:relative. This will cause the orange box's position to depend on it's parent instead of the window.
#footer .padding {
position:relative;
}
Then, it's just a matter of setting the yellow box to the right position. Given that it's on the right side, I'd delete the left value entirely and set right:-45px instead.
#footer .footer-col-orange {
left:auto;
right:-45px
}
With these, it'll line up perfectly with the edge of the white box above:
You are going to run into an issue with inline styling. You not only have your styles applied by CSS, they are duplicated inline. You're going to either need to set !important in the new CSS that I've provided (not best practice), or better, remove the inline styling. If you provide some more information about how your side is built (WordPress, HTML template, etc) I can help with removing the inline styling.
I have a "red" div, which I want to force under the "black" div and under the text in the footer And "red" div shoudld be over div with class f_content. See my fiddle.
Where is my fault?
What should I change...?
Tricks with z-index give negative effect.
Thank you for your time.
You are on the right track, you do that with z-index. Just remember to always set the position to the element you want to set the index of.
See below, the red div is under the black one but above the blue footer:
Working demo
Basically this is the only change needed in your code:
.wsp_box_data .image {
position: relative;
z-index: 2;
}
I got, a solution:
`f_content`
position: relative;
z-index: 2;
`image`
position: relative;
z-index: 3;
`cow_object`
z-index: -1
live solution
Is it possible to change the whole page background when hovering over different links in a seperate div on the page using css? I am not very experienced with JS, so explaining will be needed if JS is mandatory. Appreciate any help. Thank you!
div background color, to change onhover
This may help you.
With javascript, you can do:
<div onmouseover="document.body.backgroundColor='yourColor';"> </div>
Using CSS alone, it is not possible to affect the style of an ancestor of the hovered element. Your problem requires JavaScript.
Well, it is somehow possible. You won't be actually changing the page's background, but the effect will be similar.
Take a look at the code.
body {
background: lightblue;
}
a:hover:before {
content: '';
position: absolute;
display: block;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -1;
}
li:nth-of-type(1) a:hover:before {
background-color: blue;
}
li:nth-of-type(2) a:hover:before {
background-color: red;
}
li:nth-of-type(3) a:hover:before {
background-color: green;
}
Basically you just have to create a pseudoelements when a cursor hovers over a link. That pseudoelement, having absolute position with top, bottom, left and right equals 0, will take the whole screen and giving it a z-index -1 will make sure it will be below every other elements on a page. Of course you declare a background color or image in a corresponding pseudoelement.
There's a drawback, though. It's not too flexible. For example, if any of ancestor elements will have a position other than static (default), this will be a bit harder - if not impossible - to implement, since you will have to adjust the top, bottom, left, and right properties.
missing style in onmouseover:
class="test" onmouseover="document.body.style.backgroundColor='red';"