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;
Related
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.
I have created a dropdown menu but the problem I'm having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider and content.
I looked online and trying to figure out the problem but cannot fixes.
Does anyone can hel me? Please if is possible explain really well.
Thanks in advance,
Helen
This is most likely down to the css z-index of the various elements on the page. Higher z-index values will position stuff on top of lower z-index values (providing they have a positioning value). However, you have to bear in mind that child elements cannot gain a higher z-index than their parent element, or at least you can assign the z-index to any value but they will always remain within the parent element at the parent elements z-index value. Most likely the slider on your page has a higher z-index than your header/menu bar.
Also, make sure you have position:relative, position:absolute or position:fixed or the z-index will be ignored.
If you're using a HTML list e.g. <ul> try adding a higher z-index to your list to bring it over everything else.
.dropdown li {
z-index:999;
position:relative;
}
I had a similar problem when working with my drop down menu and it showing up behind the slider. The slider z-index ranged from 1-5 so I made the z-index of the drop down much larger and it now displayed correctly.
I have an image on my site that I want to be set as it's own entity that I can freeform and adjust without it conflicting with other elements, I have it's CSS as
#backgroundImage{
position:absolute;
float:right;
top:0;
left:50%;
}
Using fixed and absolute positions cause the image to stack level to the Nav bar, but any other position will cause the Nav bar to jump right under the image I'm using (it's a picture of the moon) It is cutting off the image, text, but it's behind the Nav bar.
Things I have tried: Putting it inside of a I have no idea how that would work out, and I tried floating it contained inside of a div.
I have also read some comments about putting it on the z or y axis, but I have no idea what that means, I'm still reading about it or trying to find something to help me understand it.
This is for a school project, I am still very basic in this field.
Use a z-index of -1:
#backgroundImage {
z-index: -1;
}
Also, it's not recommended that you name elements with camel-case - use dashes instead.
If you want the element completely on it's own try using the element from html. However, then it won't necessarily stay in the background. Hopefully this is what you were looking for
I'm working on a website where I want to display a giant image slideshow in the background along with a quote and a link, which for technical purposes (EDIT: described in comment below) must reside in the same parent element. On top of all that I'm displaying my content, and at one point I want the background image to display through the content, which I have accomplished by setting a margin between two of my content elements (#header and #main). It's a little hard the describe, but I hope this jsfiddle gives an idea of what I'm doing.
The problem is that link and quote displayed in the background is not clickable, since the click is instead directed at the element above displayed (#header). I know about pointer-events: none; but that's no good since I need IE support and being able to interpret clicks in the #header element.
I guess this is in some way attributable to stacking context mentioned in this answer, but I just can't get it right. I'm unable to get the desired layout without using a negative z-index on #background, while the links inside #background would probably need to be put in a parent of higher z-index. The reasonable thing would probably be to put it somewhere else in the markup, but as stated above the link is related to the rest of the content inside #background. Is it possible to make the links stacking context render "above" the stacking context of its parent element?
The code is a bit too long to do any good here, and not really that complex, so please refer to aforementioned jsfiddle.
Make the giant image a background of the <body> and don't create an element with a negative z-index for it. Then your link will be clickable - DEMO
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).