I have created hover effect of two images. image1 changes to image2 on hover in div"img3". Both images are in div"img3" and image2 position is absolute. Now my Navbar or header (section "header") position is fixed. So whenever I hover on image1 image2 comes on top of the Navbar as shown in the image2 below.
Image1
Image2
Add this to your navbar
z-index: 100;
because of this whatever u add will not poke over navbar.
The answer of DarkForest is correct.
Just to explain a bit further - the attribute of z-index which
defines layering of site elements is applicable to both position:fixed and position:absolute. The default behavior of layering is hierarchical, which means, that the element which is further in the code will initialy overlay the first element.
That is unless you define attribute z-index to one or both of these elements.
the higher the number, the more upper layer of display.
Usually, you want to assign as high z-index as you can to the fixed navbar as you don't really want anything to display over it (unless it's an element inside of it)
To summarize:
.navbar {
/*dimensions and other styles*/
position:fixed;
z-index: 100;
}
should do the trick
Related
I'm building a layout in an Angular app that looks like this:
<app-navbar></app-navbar>
<div class="router-wrapper">
<router-outlet></router-outlet>
</div>
My issue is that I have a sidebar inside the componets loaded inside the <router-outlet>, this sidebar should be placed on top of everything on the screen; but no matter what I do with z-index or position absolute it always shows "behind" the navbar on top; can this be actually done?
Example
Your wrapper cannot be position other than static if it is it becomes root for z-indexes for its children.
As an alternative, I would suggest using grid layout and push your topbar as part of layout controlled by the route (if you do that for sidebar why not for all).
Further explanation of how z-index and its context works
This can be done. If you are using the correct styles for the element it should be placed on the top of the page. If you haven't use any z-index value or position absolute for the nav-bar then simply you may need to make the position: absolute and z-index:10 for the sidemenu component to make it ahead of other elements. If you use any z-index value for the nav-bar then you need to put a higher z-index value than nav-bar for the sidebar.
On this website - Uggerhøj Improve, I would like the little div in bottom right corner (the one that says Fotograf: Erik Refner) to only appear on the background image. When I scroll down and get past the image to the black background, the text should disappear behind the background.
I've tried z-index: -1 but I'm not sure how to use the z-index properly. Can you help me?
The z-index of the background should be lower than the z-index of the bottom right div, and the z-index of the bottom right div should be greater than the z-index of the background
So something like this?
section
{
z-index: 6;
}
.fotograf
{
z-index: 5;
}
Note that the numbers I am using here are just examples.
You need to set the position property to a value other than static in order for the z-index to be considered. Also, the z-index of the element that should appear on top should be higher than the z-index of the element that should be hidden.
In your case, the div on the bottom (Fotograf) should have a z-index of, say, 2. The background image should have a z-index of 1, so that it goes behind and the one with the black background should have a z-index of 3, so that it always appears on top.
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
Hi Guys i have applied Relative positioning to the image as the above screen cap . but what i required is to take this image to front of that gray menu bar . what should i apply for menu's CSS class to do that ?
for relative position of the image i used the following code
position: relative;
top: -Xpx;
z-index: 99;
z-index:999;
or some other really high number to force it above all other elements.
Relative position is given to an element when you want to anchor (contain) other positioned elements inside it. If you want that image to appear on top of everything else you need to position it absolute. This, of course, depends on what it is you are trying to achieve.
Without seeing the html and the full css this is my best guess: You need to set the gray bar to a position:whatever and then set the z-index on that one as well.
I think you are applying the css style before the styling of the gray bar.
So you should apply the css styles on the image after the gray bar style or code.
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).