I simply want to put a button that is positioned as position absolute in front of a div that is positioned as position fixed. This way I want to prevent the button from being disabled when an angular dialog is shown and the shadow overlay of the dialog 'hides' the button. The problem is that when using position: absolute setting the z-index has no effect. When using position: relative at least a negative z-index prevents the button from being clicked at all, but it's still visible (don't know if this is expected behavior, I expected it to disappear). But no matter how high the z-index value is, it's never on top. The dialog overlay only has a z-index of 1000 ;
Related
So I have a container that has vertical scroll. Within this container I have x amount of inputs and if the user hovers over any of the inputs a tooltip will be shown hovering over on the rightside of input.
The issue that I am seeing is that the tooltips inside of the scrolling container can not have an absolute position that leaves the container. Meaning if the user scrolls over the top input the tooltip will cut off once it hits the top of the scroll container.
I have tried a bunch of things, but nothing seems to work to get this setup to work properly. Z-index does not seem to allow me to get out of the scrolling container.
Sorry this isn't a perfect example, but basically you can see that the tooltips are confined into scroll container:
http://cssdeck.com/labs/6aijimdf
Expected results:
I have a scroll area in which there is an absolute positioned element that will leave the scroll area when it overflows it.
Actual results:
I have a scroll area in which the absolute positioned element can not leave the scroll area when it overflows it.
Since tool tip container is position: relative and overflow: scroll, there is no way an position: absolute element can leave it.
I think a better way to achieve your expectation is using javascript to controll the tool tip element's position, and using position: fixed for that.
I'm trying to add a Pin it button that appears on hover on images on my website, but the positioning is totally wrong.
Basically the button's position is calculated relative to the window, and it will always stay at the initial distance from top of the window.
You can see what is happening by entering here.
I've tried adding position relative to the images, but it won't help. My guess is that the problem comes from the fact that my pages are positioned absolute.
I am getting a strange anomaly with my z-indexing. I have an image which I positioned relative with a z-index of 1, and that sits above my navigation which is positioned absolute and has a z-index of -1.
The issue is that on page load the image is behind the navigation until you scroll down and back up again, then it corrects it self and sits above the navigation as it should.
Any ideas on what might cause this?
Only set the z-index on the item you want to be ON TOP of everything else. Every element has a default z-index, so you don't need to set it on your nav menu. Just set the z-index on your image to something like 999999 to be on top:
z-index: 999999;
You could just use a z-index of 10. I think your problem may be setting the z-index to negative. I think other elements z-index default to 0? So putting it to -1 could make it behind another element and causing a weird result.
Edit: just noticed you said your nav menu was absolute. So you would have to have a z-index for it. Instead of it being -1, change it to 10. Then for your image, change it to 20.. or 100.. anything higher.
I wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning
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).