I have a SPA application that is to display a fixed header at the top of the page. This is normally working except that there are some pages that, when scrolling down, some contents of the pages is shown on top of the header (I mean, from the layer point of view, not the location).
For instance, certain divs are hidden by the header, but buttons within those divs are shown on top of the header.
Is there a way to force the header to be always on top?
Thanks!!
I think its about z index property of your fixed header.. increase the z-index property set it to something like 9999 so that it is always above everylayer..
You can use z-index for this...
HTML:
<header></header>
CSS:
header{
z-index:9999;
}
The value of z-index should be higher than all other Divs
Like others said, your problem can be fixed with the z-index CSS property, but I think the root of your problem lies deeper than this. You need to check your components for the position CSS property, it is possible that you missed to add it (along with z-index) on some divs/components.
Related
I'm using Angular JS sticky directive to stick the header of a table to the top of the page when scrolling. The table is located in a bootstrap container with a fixed width and when the Angular script activates it shows the whole header and thus overlapping the container in which it is located (if I have enough columns in the table that is).
When I have more columns than what can fit in the container, I get an horizontal scrollbar but this doesn't apply to the sticky header.
Anyone who might know how to fix this? I can't show you any live examples as I don't know how to add Angular directives in fiddle (or any other online compiler).
Here are two screenshots.
This one shows how the container prevents some columns to be shown as the table is wider than the container itself: http://imgur.com/Cj7UBak
This one shows how the sticky header has overlapped the container: http://imgur.com/KkGkOMy
it should not overlap
I'm sorry that I can't give a working demo of it but I simply don't know how to include the Angular JS Directive and without it, a demo would be useless.
EDIT
The problem, I found out, is that the sticky directive sets the position to fixed, which fixes the position to the browser, not to any parent. I don't know how to solve it still but maybe that explains the problem better for everyone.
As I discovered more about the problem I realized that I should rephrase the question. I'm therefore closing this question and refer to this one instead:
Position fixed within container element instead of the browser / viewport
I am having a rather unique issue, I can't find any information on how to fix it.
Here is a picture:
I want the credit card input box moved to the back, if I'm explaining myself correctly.
I am using http://creditcardjs.com/ and Bootstrap 3
The z-index proprety of the element you want to move back must be greater than the z-index of the element you want to remain in the front.
You can specify the z-index from css.
Here's more about using z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
If you want to move your credit card block back then reduce z-index.
but i think you want it at the center of page as shown in the link.Now in your case block is on navigation bar.
for that add css to your block.
position:relative; margin:200px;
Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!
Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.
You'll need to use z-index to set the layering, something like this:
.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}
Then you can fine tune it by using numbers in between.
I have a layout like this: http://jsfiddle.net/MTWu5/
Centered page, with sticky header. Inside the header there's menu links to anchors in the page. My problem is when I click on them, I want the anchor to scroll just under the header, not behind it.
How could I do this??
First, i'd write the anchor that way.
<a name="anchor" id="anchor"></a>
If you don't use the close tag for the a element, no position style can be applied without missed up everything.
Then i just applied that style
#anchor{position:absolute;margin-top:-100px;}
It seems to works. Your layout is preserved, no margin. That solution works only if you work with fixed height. The margin top is the height of your header.
Hope that is what you were looking for.
Link to example jsfiddle
hai your problem is fixed "The path is: http://jsfiddle.net/MTWu5/2/
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).